一、溢出
当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出
横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽
属性:overflow/overflow-x/overflow-y
取值:
1、visiable:默认值,溢出可见
2、hidden:溢出部分隐藏
3、scroll:显示滚动条,不管是否溢出都显示滚动条,只有在溢出时,滚动条才可用
4、auto:自动,溢出方向有滚动条,没溢出方向没有滚动条
二、边框
1、四边简写
属性:border:width style color
width:边框宽度
style:边框的样式
取值:
solid:实线
dotted:圆点虚线
dashed:线状虚线
double:双实线
color:边框颜色,合法的颜色值,支持透明色(transparent)
border直接设置上下左右4个方向的边框
取消边框:border:none/0
2、单边定义
border-top
border-right
border-bottom
border-left
3、单属性定义
border-width
border-style
border-color
4、单边单属性定义12个
border-top-width
4变x3个属性=12个
5、边框的倒角
把直角变成圆角
border-radius
取值:
(1)以px为单位的数字
(2)% 50%为圆形
单角设置:先写上下,再写左右
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
6、边框的阴影
box-shadow
取值:h-shadow v-shadow blur spread color inset
h-shadow:水平方向阴影的偏移,正值往右,负值往左
v-shadow:垂直方向阴影的偏移,正值往下,负值往上
blur:影音迷糊距离,越大越模糊,负值就消失
spread:影印尺寸,指阴影在基础上扩出来的距离
color:颜色
inset:将默认的外部阴影变为内部阴影
7、边框的轮廓
边框的边框,绘制与边框外边的线条
outline:width style color
给input边框去掉轮廓:outline:none/0;