CSS3圆角边框和盒子阴影
圆角边框(CSS3)
- 语法：
border-radius: xxpx;- 其中每一个值可以为 数值或百分比的形式。
- 技巧： 让一个正方形 变成圆圈
border-radius: 50%;示例：
代码：
.b1{
width: 250px;
height: 250px;
border: 1px solid;
border-radius: 50%;
margin: 50px auto;
}
.b2{
margin: 50px auto;
width: 250px;
height: 50px;
border: 1px solid;
border-radius: 25px ;
}效果图矩形的圆角（即第二个图）， 就不要用百分比，因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。
盒子阴影(CSS3)
- 语法:
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；值 | 作用 |
|---|---|
h-shadow | 必须，水平阴影的位置 |
v-shadow | 必须，垂直阴影的位置 |
blur | 可选，模糊的距离 |
spread | 可选，阴影的尺寸 |
color | 可选，阴影的颜色 |
inset | 可选，将外部阴影改成内部阴影 |
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的，不需要写
- 想要内阴影可以写 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录