css-不透明度、对齐、阴影

opacity 属性指定元素的不透明度/透明度。

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

 

 

 

 

 

 代码：

<head>
    <meta charset="UTF-8">
    <title>悬停和不透明度</title>

<style>
    li {
        display: inline-block;
        width: 33.33%;
        float: left;
        text-align: center;
        color: red;

    }
    img:hover {
        opacity: 1;
        box-shadow: 0 0 20px #FF0000;
        border: solid 2px black;

    }
    img {
        display: inline-block;
        opacity: 0.5;
        margin: auto;
        height: 300px;
        width: 80%;
        /*box-sizing: border-box;*/
    }

</style>
</head>
<body>

<ul>
<li><img src="../img/u.webp"><br><span>第一张图片</span></li>
<li><img src="../img/u.webp"><br><span>第二张图片</span></li>
<li><img src="../img/u.webp"><br><span>第三张图片</span></li>
</ul>

</body>



对齐：

（1）、要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

（2）、如果仅需在元素内居中文本，请使用 text-align: center;

（3）、如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素：

（4）、对齐元素的一种方法是使用 position: absolute; 

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

（5）、对齐元素的另一种方法是使用 float 属性：

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

（6）、垂直对齐-使用padding

（7）、如需同时垂直和水平对齐，请使用 padding 和 text-align: center;

（8）、垂直对齐-line-height；使其值等于 height 属性值

 

posted @ 2023-01-17 15:00  😂😂幺力儿园毕业😂😂  阅读(41)  评论(0)    收藏  举报