創(chuàng)建多列
column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)：
實(shí)例
把 div 元素中的文本分隔為三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-gap 屬性規(guī)定列之間的間隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則府蔗。
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
| 屬性 | 描述 |
|---|---|
| column-count | 規(guī)定元素應(yīng)該被分隔的列數(shù)。 |
| column-fill | 規(guī)定如何填充列。 |
| column-gap | 規(guī)定列之間的間隔。 |
| column-rule | 設(shè)置所有 column-rule-* 屬性的簡寫屬性幢尚。 |
| column-rule-color | 規(guī)定列之間規(guī)則的顏色灯萍。 |
| column-rule-style | 規(guī)定列之間規(guī)則的樣式。 |
| column-rule-width | 規(guī)定列之間規(guī)則的寬度珍德。 |
| column-span | 規(guī)定元素應(yīng)該橫跨的列數(shù)。 |
| column-width | 規(guī)定列的寬度矗漾。 |
| columns | 規(guī)定設(shè)置 column-width 和 column-count 的簡寫屬性锈候。 |
1.column-count: number|auto;
number 元素內(nèi)容將被劃分的最佳列數(shù)。
auto 由其他屬性決定列數(shù)敞贡，比如 "column-width"泵琳。
2.column-fill: balance|auto;
balance 對列進(jìn)行協(xié)調(diào)。瀏覽器應(yīng)對列長度的差異進(jìn)行最小化處理嫡锌。
auto 按順序?qū)α羞M(jìn)行填充虑稼，列長度會各有不同。
3.column-gap: length|normal;
length 把列間的間隔設(shè)置為指定的長度势木。
normal 規(guī)定列間間隔為一個常規(guī)的間隔蛛倦。W3C 建議的值是 1em。
4.column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width 設(shè)置列之間的寬度規(guī)則啦桌。
column-rule-style 設(shè)置列之間的樣式規(guī)則溯壶。
column-rule-color 設(shè)置列之間的顏色規(guī)則。
5.column-span: 1|all;
1 元素應(yīng)橫跨一列甫男。
all 元素應(yīng)橫跨所有列且改。
6.columns: column-width column-count;
column-width 列的寬度。
column-count 列數(shù)板驳。
七又跛、CSS3補(bǔ)充
<p>橢圓邊框3</p>
<p id="rcorner3"></p>
:
#rcorner3{
border-radius:50%;
background:blue;
padding:20px;
width:200px;
height:150px;
}
<P>指定背景圖片元素的圓角</P>
<p id ="rcorners3">圓角</p>
:
#rcorners3{
border-radius:25px;
background:url(1234.jpg);
background-position:left top;
background-repeat:repeat;
padding:20px;
width:200px;
height:150px;
}
陰影
外陰影
.div1{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray;
}
內(nèi)陰影
.div2{
width:200px;
height:100px;
background:green;
box-shadow:10px 10px 5px 5px gray inset;
}
設(shè)置多層陰影
div{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray,
15px 15px 5px 5px blue,
20px 20px 5px 5px yellow,
25px 25px 5px 5px green;
}
倒影效果
p{
font-size:36px;
-webkit-box-reflect:below -10px
-webkit-linear-gradient(top,transparent 20%,#ffffff)
}