css3笔记

旧城等待， 2022-07-19 12:40 124阅读 0赞

//圆角效果  
border-radius:0 0 0 0;  
//阴影  
box-shadow:0 0 0 \#fff;  
box-shadow:0 0 0 \#fff inset;  
//边框应用图片  
border-image:url() 0 round平铺/repeat重复/strech拉伸;  
//颜色透明  
color:rgba(0,0,0,0.8);  
//渐变色彩  
background-image:linear-gradient(to top/从下到上,top right/从左到右，to bottom/从上到下，top left/从右到左，to top left/右下角到左下角，to top right/左下角到右上角，\#fff,\#000,red,blue);  
//省略标记...  
text-overflow:ellipsis;   
overflow:hidden;   
white-space:nowrap;  
//嵌入字体  
@font-face \{  
    font-family: "MOOC Font";  
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");  
\}  
//文字阴影  
text-shadow:0 0 0 \#fff;  
//设置元素背景图片  
background-origin:border-box|padding-box|content-box;  
//背景图片大小  
background-size:auto/px/%/cover/contain;  
//多个背景  
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),  
           url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),  
           url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);  
background-position: left top, 100px 0, 200px 0;  
background-repeat: no-repeat, no-repeat, no-repeat;  
//属性选择器                                  class^-------------href$--------------title\*  
<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="\#" class="icon">我类名是icon</a>

<a href="\#" title="我的title是more">我的title是more</a>  
a\[class^=icon\]\{  
  background: green;  
  color:\#fff;  
\}  
a\[href$=pdf\]\{  
  background: orange;  
  color: \#fff;  
\}  
a\[title\*=more\]\{  
  background: blue;  
  color: \#fff;  
\}  
//否定选择器    :not  
form \{  
  width: 200px;  
  margin: 20px auto;  
\}  
div \{  
  margin-bottom: 20px;  
\}  
input:not(\[type="submit"\])\{  
  border:1px solid red;  
\}  
//空选择器     empty  
div/p/span/a:empty\{display:none;/加样式\}  
//目标选择器        ：target  
<h2><a href="\#brand">Brand</a></h2>  
<div class="menuSection" id="brand">  
    content for Brand  
</div>  
.menuSection\{  
  display: none;  
\}  
:target\{/\*这里的:target就是指id="brand"的div对象\*/  
  display:block;  
\}

//元素第一个子元素//元素最后一个子元素  
first-child  
last-child  
div,p,span,li:first-child/:last-child  
//定位父元素的一个或者多个特定的子元素             nth-child(n)  
:nth-child(2n)偶数  
:nth-child(2n+1)奇数  
//从父元素的最后一个子元素开始计算             nth-last-child(n)  
nth-last-child(5)  
//禁用input       :enabled  
input\[type="text"\]:enabled\{\}  
//不可用输入框    :disabled  
input\[type="text"\]:disabled\{\}