css3(2)

作者: OldSix1987 | 来源:发表于2016-08-28 15:29 被阅读6次

垂直对齐


Paste_Image.png
  1. 外层的div需要设置:display:table
  2. 内容的div设置:
    (1)display:table-cell
    (2)vertical-align:middle

 <div id="content">
    <div id="wenzi">
        锄禾日当午,<br>
        汗滴禾下土。<br>
        谁知盘中餐,<br>
        粒粒皆辛苦。<br>
    </div>
  </div>

        #content {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: auto;
            display: table;
        }
        
        #wenzi {
            border: 1px solid red;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

圆角矩形


Paste_Image.png
        // 圆
        div:nth-of-type(5){
            border-radius: 50%;
        }
        // 扇形
        div:nth-of-type(6){
            border-radius: 0 0 200px;
        }
        // 圆形头像
        img {
            border-radius: 50%;
        }

阴影效果


Box-shadow:水平阴影,垂直阴影,羽化值,阴影大小,阴影颜色,阴影类别:内阴影,外阴影

e.g.:box-shadow: 3px 3px 3px 3px #666666;

内阴影.png 外阴影.png

<style>
        #con {
            width: 200px;height: 200px;
            border: 1px solid red;
            border-radius: 10px;
            box-shadow: 3px 3px 3px 3px #666666; // 默认是外阴影,加上inset是内阴影;
        }
</style>

相关文章

网友评论

      本文标题:css3(2)

      本文链接:https://www.haomeiwen.com/subject/hfotettx.html