CSS边框

圆角

CSS3的border-radius属性,可以给任何元素设置“圆角”。

示例

展示效果:

image-20210307092141107

上例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.TestTitle{
padding: 30px;
}
.TestTitle p{
background-color:coral;
border:3px blue solid;
margin: 0 auto;
width: 135px;
padding: 20px;
font-size: 30px;
/* 圆角 */
border-radius: 10px;
}
</style>
<body>
<div class="TestTitle">
<p>
测试标题
</p>
</div>
</body>

更改圆角尺寸:

1
border-radius: 30px;

更改后效果:

image-20210307092432805

boder-radius语法:

明显的可以看出,圆角是有四个位置的,我们上述的例子中是直接把四个角的圆角尺寸设置为了相同。

当然,可以分别设置这几个角的圆角尺寸。

border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

例如:

1
2
3
4
5
6
7
8
/* 左上角 */
border-top-left-radius:10px;
/* 右上角 */
border-top-right-radius:30px;
/* 右下角 */
border-bottom-right-radius:10px;
/* 左下角 */
border-bottom-left-radius:30px;

效果:

image-20210307093216681

border-radius的语法是支持简写的,即四个叫可以通过一行语句实现。

语法简写:

当设置的值的个数如下时:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同

例如上面那个例子就可以简写为:

1
border-radius: 10px 30px;

又例如:

1
border-radius: 10px 20px 30px 40px;

效果:

image-20210307093559809

盒阴影

CSS的box-shadow属性可以用来在元素的框架上添加阴影效果。

示例:

image-20210307094036011

该属性可以设置的值有:

h-shadow:X轴偏移量(必须)

v-shadow:Y轴偏移量(必须)

blur:模糊半径

spread:扩散半径

color:模糊颜色

inset:内部或外部阴影

注意,这六个值其中前两个是必须的其他是可选的

语法:

1
box-shadow: h-shadow v-shadow blur spread color inset;

js语法:

1
object.style.boxShadow="h-shadow v-shadow blur spread color inset"

注意,因为其中部分值是可选的,所以当填写时遵循下面规则:

当给出两个、三个或四个 值时。
如果只给出两个值, 那么这两个值将会被当作h-shadowv-shadow来解释。
如果给出了第三个值, 那么第三个值将会被当作blur解释。
如果给出了第四个值, 那么第四个值将会被当作spread来解释。
可选,关键字inset
可选,color值。

部分示例:

1
box-shadow: 10px 5px 5px aqua;

image-20210307095855508

1
box-shadow:30px -20px 10px #888888;

image-20210307100002226

1
box-shadow:10px 10px 1px 2px #888888;

image-20210307100103275

1
box-shadow:10px 10px 5px #888888 inset;

image-20210307100157605

注意,边框阴影可以设置多个,中间用逗号分隔即可。

例如:

1
box-shadow:10px 10px 5px #888888,-20px -20px 5px aqua;

image-20210307100702579

取值可用像素px,也可用em。

例如:

1
box-shadow:0.5em 0.5em 5px #888888;

image-20210307101050386