圆角的直径等于盒子的宽高,形成一个扇形
右上角扇形
border-radius:{
width:100px;
height:100px;
background:red
border-radius:0 100px 0 0;
}
圆角的直径等于盒子宽度的一半,形成一个半圆
上半圆
border-radius:{
width:100px;
height:50px;
background:red
border-radius:50px 50px 0 0;
}
盒子阴影
默认外阴影,
box-shadow: insert x y blur color;(20px 20px 10px red)
insert:内阴影
距离x轴的距离;距离y轴的距离;阴影值大小,值越大,越模糊;阴影颜色,起点(0,0)即盒子左上角开始
background-size:背景图片高度和宽度,既可以给值也可以给百分比
background-size:100px/50% 70px/50%;
注:如果只给一个值得话,另外一个值则是auto(自动)
cover 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的大小,图片不能完整显示
background-size:cover
contain 保持图像的纵横比并将图像缩放成适合背景定位区域大小,不能完全覆盖图片
background-size:contain
text-shadow属性
blur 可选,模糊距离
color 可选,阴影的颜色
text-shadow:20px 20px 10px red;
20px:距离X轴的距离 ,允许负值
20px:距离顶部y轴的距离 ,允许负值
10px:阴影的大小,值越大,越模糊
red:阴影的颜色
CSS3渐变
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
background:linear gradients{to right bottom,red,green,blue}
从左上到右下颜色是红绿蓝
background:linear gradients{to right bottom,red,green 80%}
从左上到右下颜色是红色,然后在80%的位置变成绿色
径向渐变
~形状为圆形的径向渐变~
background:radial gradients{circle,red,green,blue;}
形状为圆形的径向渐变(去掉circle,默认椭圆形径向渐变),颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合形成
~颜色结点不均匀分布的径向渐变~
background: radial-gradient{(red 5%, green 15%, blue 60%);}
注:属性值之间用逗号隔开
text-overflow 属性
超出部分显示省略号
white-space:nowrap 文本不会换行,控制在同一行
overflow:hidden 超出父盒子区域内容隐藏
text-overflow:ellipsis 用省略号来代表被修剪的文本
注:父盒子必须是块元素,要有宽高
控制多行展示省略号:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;谷歌内核下的弹性盒子
-webkit-line-clamp: 2;控制多少行
word-break: break-all;破坏单词,让长单词强制换行
-webkit-box-orient: vertical;纵向排列文字