css3-盒模型新增屬性

時間 2019-12-18

標籤 css3 css 模型新增屬性欄目 CSS 简体版

原文原文鏈接

box-shadow：跟text-shadow相似，可多層疊加

box-shadow:[inset] x y blur [spread] color
inset:投影方式，inset內投影，不加參數外投影
spread擴展陰影半徑，先擴展，再模糊前端

box-reflect：倒影，只有webkit

-webkit-box-reflect:below;
-webkit-box-reflect:left;
-webkit-box-reflect:right;
-webkit-box-reflect:above;
-webkit-box-reflect:right 10px;倒影跟元素之間產生的距離，可選參數web

<style>
img{display:block; margin:200px auto;
height:200px;height:200px;
-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}
</style>
</head>
<body>
<img src="../前端背景圖/14873699.jpg" />
</body>

效果如圖：
3d

resize與overflow：auto配合使用

resize：both水平垂直均可以縮放
resize：horizontal只有水平能夠縮放
resize：vertical只有垂直能夠縮放code

<style>
.box{border:5px solid black; resize:both; overflow:auto; height:200px;width:200px;}
</style>
</head>
<body>
<div class="box"></div>
</body>

box-sizing盒模型解析模型

content-box標準盒模型height/width=border+padding+content
border-box怪異盒模型height/width=contentblog

<style>
.box{width:200px; height:200px;padding:50px; border:10px solid black; box-sizing:content-box;}
.div{height:50px; background:red;}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>

效果如圖：
it

<style>
.box{width:200px; height:200px;padding:50px; border:10px solid black; box-sizing:border-box;}
.div{height:50px; background:red;}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>

效果如圖：
class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。