-
.columnNews,.columnVideo,.columnAboutUs{
? ? ? ? color:red;
? ? }
? ? a[title*=b]{
? ? ? ? color:#999;
? ? }
? ? a[href*=d]{
? ? ? ? color:yellow;
? ? }
查看全部 -
1、制作導(dǎo)航圓角
?border-radius:5px;
2、制作導(dǎo)航立體風(fēng)格
box-shadow:1px?1px?6px?red;
3、制作導(dǎo)航分隔線
.nav?li:after{ ????content:""; ????position:absolute; ????margin-left:15px; ????height:100%;border:1px?solid?#eee ; }查看全部 -
在border-image圖片四個邊角（1，3，7，9）只會呆在border的四個角,并且水平和垂直方向均被拉伸來填充border的四個角。
查看全部 -
例子：
background-image:linear-gradient(to?left,?red,?orange,yellow,green,blue,indigo,violet);
查看全部 -
格式? border-image:url(圖片路徑)?切割圖片的寬度?圖片延伸方式 切割圖片的寬度：單為px?越大圖片顯示越小 圖片
延伸方式:
?round：平鋪??邊框四個角為圖片四個角，中間重復(fù)圖片內(nèi)容 ???????????
?repeat:重復(fù)???邊框四個角為圖片四個角，中間重復(fù)圖片內(nèi)容 ????????????
stretch:拉伸???邊框四個角為圖片四個角??中間對圖片拉伸鋪滿
查看全部 -
box-shadow:?X軸偏移量?Y軸偏移量?[陰影模糊半徑]?[陰影擴展半徑]?[陰影顏色]?[投影方式];
注意：inset 可以寫在參數(shù)的第一個或最后一個，其它位置是無效的。
如果添加多個陰影，只需用逗號隔開即可。
查看全部 -
^主要是看屬性以val開頭相同的都能適用
$主要是看屬性val結(jié)尾相同的都能適用
*其屬性值任意位置包含了val? 都能適用
查看全部 -
/*使用偽元素制作導(dǎo)航列表項分隔線*/
.nav li:after{
? ? ? ? ? ? content:"";
? ? ? ? ? ? ?position:absolute;
? ? ? ? ? ? ?right:0px;
? ? ? ? ? ? ?top:20px;
? ? ? ? ? ? ?height:15px;
? ? ? ? ? ? ?width:1px;
? ? ? ? ? ? ?background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
}
?/*刪除第一項和最后一項導(dǎo)航分隔線*/
? ? ? ? .nav li:last-child:after{
? ? ? ? width:0px;
? ? ? ? ? ? height:0px;
}
查看全部 -
.task {
? ? width: 300px;
? ? height: 140px;
? ? border: 1px solid #999;
? ??
? ? background:url(http://static.mukewang.com/static/img/logo_index.png)no-repeat 0 0 / 75% 50%,
? ? ? ? ? ? ? ?url(http://static.mukewang.com/static/img/logo_index.png)no-repeat right bottom / 50% 40%;
? ? /*background-position: 0 0, right bottom;*/
? ? /*background-repeat: no-repeat, no-repeat;*/
? ? /*background-size:75% 55%,50% 40%;*/
}
查看全部 -
外陰影：outset 內(nèi)陰影：intset查看全部
-
將偽元素大小設(shè)為0即可刪除。
查看全部 -
https://www.cnblogs.com/zcynine/p/5017894.html
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>CSS制作立體導(dǎo)航</title>
<link rel="stylesheet" >
<style>
body{
? background: #ebebeb;
}
.nav{
? width:560px;
? height: 50px;
? font:bold 0/50px Arial;
? text-align:center;
? margin:40px auto 0;
? ? ? background: #f65f57;
? /*制作圓*/
? border-radius:5px;
? ? ? ? ? /*制作導(dǎo)航立體風(fēng)格*/
? ? ? ? ? box-shadow: 10px 10px 5px #888888;;
}
.nav a{
? display: inline-block;
? -webkit-transition: all 0.2s ease-in;
? -moz-transition: all 0.2s ease-in;
? -o-transition: all 0.2s ease-in;
? -ms-transition: all 0.2s ease-in;
? transition: all 0.2s ease-in;
}
.nav a:hover{
? -webkit-transform:rotate(10deg);
? -moz-transform:rotate(10deg);
? -o-transform:rotate(10deg);
? -ms-transform:rotate(10deg);
? transform:rotate(10deg);
}
.nav li{
? position:relative;
? display:inline-block;
? padding:0 16px;
? font-size: 13px;
? text-shadow:1px 2px 4px rgba(0,0,0,.5);
? list-style: none outside none;
}
/*使用偽元素制作導(dǎo)航列表項分隔線*/
? .nav li:after{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? content:"|";
? ? ? ? ? ? right:0;
? ? ? ? ? ? top:0;
? ? ? ? ? ? color:red;
? ? ? ? ? ? text-shadow:0 0 0 rgba(0,0,0,0.5);
}/*刪除第一項和最后一項導(dǎo)航分隔線*/
.nav li:last-child::after{
? ? ? ? ? ?content:"";
?}
.nav a,
.nav a:hover{
? color:#fff;
? text-decoration: none;
}
</style>
</head>
<body>
<ul class="nav">
? ? ?<li><a href="#">Home</a></li>
? ? ?<li><a href="#">About Me</a></li>
? ? ?<li><a href="#">Portfolio</a></li>
? ? ?<li><a href="#">Blog</a></li>
? ? ?<li><a href="#">Resources</a></li>
? ? ?<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>
查看全部 -
?text-overflow用來設(shè)置是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出。
語法：
但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現(xiàn)溢出時產(chǎn)生省略號的效果，還須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果，代碼如下：
text-overflow:ellipsis;? overflow:hidden;? white-space:nowrap;?同時，word-wrap也可以用來設(shè)置文本行為，當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
查看全部 -
偽類選擇器：empty
用來選擇沒有任何內(nèi)容（有空格也不算空）的元素。
例：給空的div元素添加1px的綠色邊框
div{ ????min-height:30px; } div:empty{ ????border:1px?solid?green; }<body> ????<div>我這有內(nèi)容</div> ????<div>?</div> ????<div></div> </div>
查看全部
舉報