css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)

边框颜色

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第1张图片

强调 同时设置4个边框颜色时,顺序为上右下左

边框粗细

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第2张图片

边框样式

 border-style

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第3张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第4张图片

border简写

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第5张图片

margin 属性

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第6张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第7张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第8张图片

padding属性

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第9张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第10张图片

盒子型模

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第11张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第12张图片

border-radius 圆角边框 

取值:px | em | rem | 百分比……

设置给:块、行内块、行内元素 

作用:设置元素边框的圆角

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第13张图片

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第14张图片





    
    
    
    Document
    


   
    

盒子阴影

  /* =======================================================================
            box-shadow:0px 0px 1px #000
            第1个值为0时,代表左右边框阴影 为1px范围
            第1个值为正整数 代表 左边框阴影
            第1个值为负整数 代表 右边框阴影

            同理
            第2个值为0 代表上下边框阴影
            第2个值为正整数 代表1px阴影距离上边框多少
            第1个值为负整数 代表下边框阴影设置

            box-shadow:12px 12px 12px 12px black; /*水平偏移量、垂直偏移量、阴影模糊度、影子大小、颜色
        
         */

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第15张图片





    
    爱奇异视频播放列表
    



    

热播

  • 神武赵子龙

    怒,林更新不抱网红抱女神

    点击次数:242445次

  • 旋风十一人

    胡歌变教练在撩前女友

    点击次数:242445次

  • 太阳的后裔

    宋慧乔吃嫩草

    点击次数:242445次

  • 山海经之赤影传说

    娜扎张翰再度联手

    点击次数:242445次

总结

css3 - 样式 盒子模型(盒子装饰,阴影、圆角以及边框)_第16张图片

你可能感兴趣的:(CSS3,css3)