创始人

2024-03-07 00:44:59

0次

1、圆角边框

border-radius属性，用于设置元素的外边框圆角
原理：(椭)圆和矩形的两条边相切（圆的半径就是length），形成圆角效果
在这里插入图片描述
属性：

border-top-left-radius;左上
border-top-right-radius:右上
border-bottom-right-radius;右下
border-bottom-left-radius:左下

简写形式：border-radius
length1-4代表左上、右上、右下、左下角
只写一个数值就代表，四个角一样

border-radius:length1,length2,length3,length4;
border-radius:length;
border-radius:length1,length2;

参数值：可以是百分比或数值形式

1.2圆角边框的应用

设置length为矩形长（宽）的一半，矩形长=宽（正方形），也可以直接写50%

div{width:100px;height:100px;border-radius:50px;//或者写50%
}



Document

round-圆形

在这里插入图片描述

设置length为矩形高度的一半



Document

圆角矩形

在这里插入图片描述



Document

任意圆角矩形

在这里插入图片描述或者这样写：



Document

任意圆角矩形

在这里插入图片描述

css3新增样式属性，使用box-shadow属性为盒子添加阴影效果

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

值	描述
h-shadow	必须，水平(horizontal)阴影的位置，可以是负值,px
v-shadow	必须，垂直(vertical)阴影的位置，可以是负值,px
blur	可选，模糊距离，影子的虚实,px,如果为负值，就看不到了
spread	可选，阴影的尺寸，影子的大小，px
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影，默认不写就是外阴影

（1）静态影子



Document

在这里插入图片描述

（2）动态影子
鼠标悬浮到盒子，展示阴影的效果


Document

QQ录屏20221130231318

在这里插入图片描述

css3中使用text-shadow属性

text-shadow:h-shadow v-shadow blur color;



Document

我是阴影

在这里插入图片描述