CSS--边框

原创
2019/09/16 01:22
阅读数 122

一、溢出

当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出

横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽

属性: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;

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部