css复习：，CSS 阴影，外边距

最新推荐文章于 2024-08-06 21:02:26 发布

半浮名

最新推荐文章于 2024-08-06 21:02:26 发布

阅读量191

点赞数

分类专栏：笔记 html,css,js基础知识文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/121195338

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

html,css,js基础知识

14 篇文章 1 订阅

订阅专栏

css复习：

1.opacity 属性

指定元素的不透明度/透明度。值：0~1之间
给一个父元素加：这个属性，那它的子元素也会跟父元素一样有这个属性
区别：rgba
也可以设置透明度
如果您不希望对子元素应用不透明度,
请使用 RGBA 颜色值。
background-color: rgba(255, 255, 255, 0.2);
可以应用：图片：加透明度，看起来半透明
加了opacity: 0.5;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>




<style>



    .one{



        width: 300px;
        height: 300px;
        background-color: pink;
        
    }


    .two{


       /* width: 400px;*/
       width: 900px;
        height: 50%;
        background-color: skyblue;
      opacity: 0.5;


    }



    li{
        float: left;
width: 300px;
height: 100%;
background-color: tomato;
    }
</style>





<body>
    





<div class="one">

<ul class="two">
<li></li>
<li></li>
<li></li>



</ul>




</div>







</body>
</html>

效果：
在这里插入图片描述
没加之前：区别很大

2.CSS 阴影效果：

CSS text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>




    h1{

        text-shadow: 2px 2px;

    }
</style>
<body>
    





    <h1>helloWorld!</h1>


</body>
</html>

没加 text-shadow: 2px 2px之前：

在这里插入图片描述
加了之后： text-shadow: 2px 2px red;

再向阴影添加模糊效果： text-shadow: 2px 2px 5px red;
5px：模糊程度

CSS box-shadow 属性
CSS box-shadow 属性应用阴影于元素。值

box-shadow: 10px 10px black;
10px 水平阴影
10px 垂直阴影
阴影颜色：black

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>




    h1{

        text-shadow: 2px 2px 5px red;

    }

div{

width: 300px;
height: 300px;
background-color: skyblue;

box-shadow: 10px 10px black;
}


</style>
<body>
    





    <h1>helloWorld!</h1>
    <div>





    </div>


</body>
</html>

没加之前：
在这里插入图片描述

加了：box-shadow: 10px 10px black;之后
在这里插入图片描述
加模糊效果：box-shadow: 10px 10px 5px grey;
5px：设置模糊程度：

3.CSS margin 属性：外边距

一个元素的外面：
用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距

auto - 浏览器来计算外边距
margin-top
margin-right
margin-bottom
margin-left

其中：auto 值
可以将 margin 属性设置为 auto，以使元素在其容器中水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>


.one{


    width: 300px;
    height: 300px;
    background-color: pink;

margin:auto;

}





</style>


<body>
    


<div class="one"></div>







</body>
</html>

效果图：加了：margin:auto
在这里插入图片描述
margin: 25px 50px 75px 100px;//先从：上下左右开始的
20%：是父元素：的高的20%开始：从上数
加了这个：margin:20% auto;

半浮名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css复习：，CSS 阴影，外边距

css复习：1.opacity 属性2.CSS 阴影效果：3.CSS margin 属性：外边距1.opacity 属性指定元素的不透明度/透明度。值：0~1之间给一个父元素加：这个属性，那它的子元素也会跟父元素一样有这个属性区别：rgba也可以设置透明度如果您不希望对子元素应用不透明度,请使用 RGBA 颜色值。background-color: rgba(255, 255, 255, 0.2);可以应用：图片：加透明度，看起来半透明加了opacity: 0.5;<!DOCT
复制链接

扫一扫