CSS圆角边框盒子阴影文字阴影
- 创业
- 2025-08-20 04:06:01
目录
1.圆角边框（重点）
2.盒子阴影（box-shadow）
3.文字阴影（text-shadow）
1.圆角边框（重点）
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius: length;
radius半径（圆的半径）原理:(椭)圆与边框的交集形成圆角效果。
!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> <style> div { width: 300px; height: 150px; background-color: pink; border-radius: 10px; } </style> </head> <body> <div> <div class="header"> C罗 </div> </div> </body>使用：语法：border-radius：length;
参数值可以为数值或者百分比的形式。如果是正方形，想要设置一个圆，数值为高度或者宽度的一般，百分比为50%。如果是一个矩形，设置为高度的一般。该属性是一个简写属性，可以跟随四个值，分别代表左上角，右上角，左下角，右下角。分开写： border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-bottom-radius。 2.盒子阴影（box-shadow）在css3中新增盒子阴影 box-shadow
语法： box-shadow：h-shadow v-shadow blur spread color inset；
值描述h-shadow必需，水平阴影的位置允许负值v-shadow必需，垂直阴影的位置允许负值blur可选，模糊距离spread可选，阴影的尺寸color可选，阴影的颜色，请参照CSS颜色值inset可选，将外部阴影（outset）改为内部阴影半透明：rgba（0,0,0, .3）
注意：
默认的是外部阴影（outset）但是不可以写这个单词，否则导致阴影无效。盒子阴影不占空间，不会影响其他盒子排列。 3.文字阴影（text-shadow）语法：
text-shadow：h-shadow v-shadow blur color ；
值描述h-shadow必需，水平阴影的位置允许负值v-shadow必需，垂直阴影的位置允许负值blur可选，模糊距离color可选，阴影的颜色，请参照CSS颜色值CSS圆角边框盒子阴影文字阴影由讯客互联创业栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS圆角边框盒子阴影文字阴影”
