圆角边框(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);
}
版权属于:乐心湖's Blog
本文链接:https://www.xn2001.com/archives/464.html
声明:博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!