圆角边框
border-radius: 10px;
radius半径原理:(椭)圆与边框的交集形成圆角效果。
- 参数值可以是数值或百分比形式;
- 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半,或者写50%;
- 如果是个矩形,设置为高度的一半就可以;
- 该属性是一个简写属性,可以跟四个角,分别代表左上角,右上角,右下角,左下角;
- 分开写:border-top-left-radius, border-top-right-radious。
<style>
.yuanxing {
width: 200px;
height: 200px;
background-color: aqua;
/* border-radius: 100px; */
/* 50%就是宽度和高度的一半 等价于100px */
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: aquamarine;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* border-radius: 10px 20px 30px 40px; */
/* border-radius: 10px 40px; */
background-color: bisque;
border-top-left-radius: 50px;
}
</style>
</head>
<body>
1.圆形的做法:
<div class="yuanxing"></div>
2.圆角矩形的做法:
<div class="juxing"></div>
3.可以设置不同的圆角:
<div class="radius"></div>
</body>
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。 |
insert | 可选。将外部阴影(outset)改为内部阴影 |
注意:
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效;
- 盒子阴影不占用空间,不会影响其他盒子排列。
文字阴影
text-shadow:h-shadow v-shadow blur color;
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。 |