border-radio属性,改边框的圆润度
width: 200px;
height: 200px;
border: 2px solid rebeccapurple;
上右下左都是50%
border-radius: 50%;
写四个值按顺时针顺序
border-radius: 0 30px 50px; 左上角0,右上角和左下角为30(对角),右下角50
border-radius:30px 50px; 左上角和右下角30,右上角和左下角50
盒子阴影:(五个属性)
inset:阴影类型内阴影
x-offset:X轴位移,指定阴影水平位移量
y-offset:y轴位移,指定阴影水平位移量
blur-radius:模糊半径的大小
color:阴影颜色
写法为: box-shadow:inset x-offset y-offset blur-radius color;
例如 : box-shadow:inset 0px 10px 10px blue;
box-shadow,默认的是外阴影,不设置就是自动外阴影,设置inset就变成了内阴影
width: 200px;
height: 200px;
border: 2px solid rebeccapurple;
上右下左都是50%
border-radius: 50%;
写四个值按顺时针顺序
border-radius: 0 30px 50px; 左上角0,右上角和左下角为30(对角),右下角50
border-radius:30px 50px; 左上角和右下角30,右上角和左下角50
list-style-type: circle; 空心圆
list-style-type: decimal; 数字
list-style-type: disc;实心圆,默认样式
disclosure-closed 右箭头 ,树形图的关闭箭头
disclosure-open 树形图的打开箭头
background
background-size: width height; 如果只给一个值,第二个自动给auto(自动)*,不知道宽高具体数值的情况下,可以设置单位为%
background-size:cover;会保持图像的纵横比,完全覆盖背景的最小大小(图像不一定会展示完全,但是能保证图片的纵横比)
background-size:contain 会保持图像纵横比,并且将图像缩放成适合背景区域最合适的大小,但是不一定能完全覆盖. 渐变 线性渐变: background:linear-gradient
从上往下
background:linear-gradient(to bottom,red,green,blue)
从下往上
background:linear-gradient(to top,red,green,blue)
从左往右
background:linear-gradient(to right,red,green,blue)
从右往左
background:linear-gradient(to left,red,green,blue)
从右上到左下
background:linear-gradient(to left bottom,red,green,blue)
从左下到右上
background:linear-gradient(to right top,red,green,blue)
径向渐变
background: radial-gradient(red 5%,green 30%,blue 60%);
圆形的渐变
background: radial-gradient(circle, red 5%,green 30%,blue 60%);
文字属性
overflow:hidden 溢出隐藏
表示超出的文本用什么来表示,ellipsis表示省略号表示
text-overflow: ellipsis;
white-space:nowrap;白空格 ,文本不会换行,继续在同一行进行
字体fonts @font-face{ font-family:自己取名字 src:url(输入路径)注意,所有字体样式都添加上,不同浏览器的兼容性不同 } 标签{ font-family:上面取得名字 } icon font 在线字体