第八十四節，css布局小技巧

標籤：css布局   images   選擇   osi   轉換   splay   地方   absolute   png   

css布局小技巧

圖片滑鼠放上去遮罩效果，顯示文字

當滑鼠放上去時

/*最外層div*/.a{    width: 384px;    height: 240px;    background-color: #ff4e37;    position: relative;}/*插入圖片的div*/.b{    width: 384px;    height: 240px;    background-color: #ff4e37;    overflow: hidden;}/*遮罩層div*/.c{    width: 384px;    height: 240px;    background-color: #010008;    opacity: 0;    overflow: hidden;    position: absolute;    left: 0px;    top: 0px;    right: 0px;    bottom: 0px;}/*滑鼠放上去效果*/div .c:hover{    background-color: #010008;    opacity: 0.5;    color: #FFFFFF;    font-size: 40px;    font-weight: bold;    text-align: center;    line-height: 240px;}<div class="a">    <div class="b">        <img src="53d.jpg">    </div>    <div class="c">        <samp>美女圖片</samp>    </div></div>

 

css繪製尖角效果

在網頁中，有很多地方會用到尖角，尖角可以是圖片的，也可以用css來繪製

用一個div來繪製尖角

.a{    /*設定邊框*/    border-top: 30px solid red;    border-right: 30px solid black;    border-bottom: 30px solid green;    border-left: 30px solid blue;    /*將區塊轉換成內聯塊*/    display: inline-block;}<div class="a"></div>

效果：顏色可以根據自己的需要調整

 

將其他不需要的3個尖角顏色改成透明的，一個尖角就形成了

.a{    /*設定邊框*/    border-top: 30px solid transparent;    border-right: 30px solid transparent;    border-bottom: 30px solid transparent;    border-left: 30px solid blue;    /*將區塊轉換成內聯塊*/    display: inline-block;}<div class="a"></div>

效果：

 

另一種效果

.a{    /*設定邊框*/    border-top: 30px solid transparent;    border-right: 30px solid transparent;    border-bottom: 0px solid transparent;    border-left: 30px solid blue;    /*將區塊轉換成內聯塊*/    display: inline-block;}<div class="a"></div>

  效果：

 

 

還可以結合偽類別選取器:hover來設定滑鼠動作尖角

.af{    width: 100px;    height: 50px;    background-color: #ff563a;}.a{    /*設定邊框*/    border-top: 10px solid green;    border-right: 10px solid transparent;    border-bottom: 10px solid transparent;    border-left: 10px solid transparent;    /*將區塊轉換成內聯塊*/    display: inline-block;    margin-top: 20px;    margin-left: 10px;}.a:hover{    /*設定邊框*/    border-top: 10px solid transparent;    border-right: 10px solid transparent;    border-bottom: 10px solid green;    border-left: 10px solid transparent;    /*將區塊轉換成內聯塊*/    display: inline-block;    margin-top: 10px;    margin-left: 10px;}<div class="af">    <div class="a"></div></div>

效果：滑鼠沒放上去時尖角向下，滑鼠放上去尖角向上

第八十四節，css布局小技巧