小白入门---CSS3新属性
来源：互联网 发布：淘宝能买到a碟吗 编辑：程序博客网 时间：2024/05/21 11:50
CSS3新属性
1.CSS3新属性简介
选择器：
* 》Ele~ele2：选择Ele后面的所有ele2标签;
* 》[attribute^=value]：选择每一个attribute属性的值以value开头的元素
* 》[attribute$=value]：选择每一个attribute属性的值以value结尾的元素
* 》[attribute*=value]：选择每一个attribute属性的值包含子字符串value的元素
* 》Ele[attribute=value]:选择属性值等于value的元素
* 》：root:可以选择文档的根元素
* 》：empty：选择文档中所有的空元素
* 》:target：选择激活的元素
* 》:out-of-range：匹配值在指定区间之外的input元素
* 》:in-range：匹配值在指定区间之内的input元素
* 》:disabled：选择每一个禁用的输入元素
* 》：enabled：选择每一个已启用的输入元素
* 》：checked：选择每个选中的输入元素
* 》：not(selector)：选择每个并非p元素的元素
* 》::selection：匹配元素中被用户选中或处于高亮状态的部分
* 》:out-of-range：匹配值在指定区间之外的input元素
* 》:in-range：匹配值在指定区间之内的input元素
* 》:read-write：用于匹配可读及可写的元素
* 》:read-only：用于匹配设置 “readonly”（只读） 属性的元素
* 》:optional： 用于匹配可选的输入元素
* 》:required： 用于匹配设置了 “required” 属性的元素
* 》:valid：用于匹配输入值为合法的元素
* 》:invalid：用于匹配输入值为非法的元素Background系列属性：
* 》background-origin:设置背景图片的原点border-box；padding-box；content-box。
* 》background-clip：裁切图片的容器里面的内容border-box；padding-box；content-box。
* 》background-attachment：设置背景图片是否随着滚动条滚动Border系列属性:
* 》border-radius：设置图片的拐角
* 》border-image:设置边框背景图的全部
* 》border-image-source：边框图片的路径
* 》border-image-slice：裁剪图片的位置，上右下左，与margin padding类似：只设置2个参数（垂直，水平），3个参数
* 》border-image-width：可以直接设置边框图片的宽度，不会受到边框宽度的影响
* 》border-image-outset:设置背景图片向外的一个距离，与父容器显示的内容有一定的关系（超出父容器的显示范围就不显示了）
* 》border-image-repeat: 裁切之后，如果不是整个图片，会重复或者拉伸多余出来这一部分，设置边框图片的重复方式Box-shadow：盒子阴影（颜色，水平偏移量，垂直偏移量，模糊范围），可以设置多组模糊数值
文本属性：
* 》text-overflow：规定文本溢出包含
* 》text-shadow:文本阴影
* 》word-break：是否吧一个单词分开换行：normal，break-all（分开）；keep-all；
* 》word-wrap：是否吧一个长单词分开：break-word（分开）渐变：
* 》线性渐变：linear-gradient(渐变方向/角度，起始颜色 位置，结束颜色 位置)
* 》放射渐变（径向渐变）:radial-gradient(形状ellipse，circle，发散反向 大小半径，起始颜色，结束颜色)
* 如果要重复渐变，只需要在前面加个repeat即可。CSS3-变形：
* 》-webkit-appearance: button：设置元素外形，设置外观外button样式
* 》outline-offset: 设置外边线的距离
* 》resize: both：让用户可以改变元素的大小，需要配合使用overflow：auto
* 》box-size：设置边框内边距的时候会影响整个元素的大小，使用borde-box可以解决这种影响
* 》transition:转场动画：指定参与过渡变化的样式 设置过渡花费的时间 动画方式 延迟时间，可以叠加多种不同步的动画
* 》@keyframes :定义关键帧动画,animation：关键帧动画
* 》skew(x,y):拉伸：不管是X/Y，角度为正数都是向原点拉伸，角度为负数是向结束点拉伸
* 》scale(x,y):放大缩小，小于1就是缩小，大于1就是放大
* 》translate():平移
* 》rotate():旋转CSS3多列：
* 》column-count:规定列数，可以吧一行文字分割成设置的列的个数，前提是不能如果设置列的宽度，如果设置了列的宽度，当列的最小宽度和不够总宽度时，列的数量就会缩小
* 》column-width:规定列的最小宽度
* 》column-span:规定横跨的列数，一般都是标题不和正文在一起，常用来设置标题
* 》column-rule:设置分隔线的样式，与边框的设置方式是一样的，是一个复合属性
* 》column-gap:设置列与列之间的间距
* 》column-fill: auto/balance(默认);设置填充样式单位： px，百分比，pt, em(也是一个类似百分比的单位，相对于父元素字号的比例)，rem(相对于根元素字号的比例):
rem(相对于根元素字号的比例):
* ->1.可以让较小的屏幕展示更多的内容，并且可以按照屏幕的宽度来设置字号(小屏幕设置小字号，大的设置大字号)
* ->2.如果所有的宽高字号都用rem表示，所有的内容展示的宽高字号都是响应式的
2、 @media (min-width:600px) and/or (其他条件) {满足这个条件下的样式}媒体查询:在不同宽度设备上显示不同的样式
处理媒体查询不支持的方式：
1、加载处理不兼容的脚本文件：
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> 2、更改IE浏览器渲染内容时使用的内核：更改成IE10以上或者是谷歌的内核：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">3、viewPort：试口
试口：height，width，initial-scale，max/minnum-scale,user-scalable：设置移动端显示内容窗口的配置
》设置试口，移动端一般都需要写这个
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
4、弹性盒/弹性布局(微信小程序有使用)、
*》新的布局方式：以前浮动定位布局(缺陷：清除浮动，浏览器是否兼容)
*》 需要将盒子设置为一个弹性盒子display:flex;旧版本是设置为box的。
*》 flex-flow:flex-direction(设置弹性盒内子元素的排列方向row,column/reverse) flex-wrap(设置弹性盒内溢出是否换行nowrap,wrap,wrap-reverse):弹性布局复合属性
*》justify-content: space-around/between，center,flex-end,flex-start:设置水平方向的排布方式(设置大盒子)
*》align-items：center,flex-end,flex-start,baseline,strech（默认）:设置元素垂直方向的排列方式(设置大盒子)
*》align-content:center,flex-end,flex-start,space-around/between：设置内容垂直方向的排列方式(设置大盒子)和justify-content是一样的，一个设置水平一个设置垂直
*》order:设置子元素的排列顺序，数字越小的越排在前面
*》flex:设置子元素的分配比例
5、具体方法使用
》HTML部分
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CCS3</title> <link rel="stylesheet" type="text/css" href="css/app.css"/> </head> <body> <!--<div> <h3>我是H3标签</h3> <p>111</p> <p>112</p> <p>113</p> <p>114</p> <p>115</p> </div> <a href="#cc">本地链接</a> <a href="https://baidu.com">在线链接</a> <div> <input type="text" placeholder="水果"/> <p>内容1</p> </div> <div> <input type="text" placeholder="蔬菜"/> <p>内容2</p> </div> <div> <input type="text" placeholder="主食"/> <p>内容3</p> </div>--> <!--<div> <a href="#">aaa</a> <p>111</p> <p>112</p> <p>113</p> </div> <ul> <li>111</li> </ul> <ul> <li>111</li> <li>111</li> <li>111</li> </ul>--> <!--<div></div> <a href="#news">jump</a> <p id="news">我是新闻标签</p> <input type="range" disabled="disabled" /> <input type="email" /> <input type="radio" checked="checked" /> <input type="radio" /> <p> * 》Ele~ele2：选择Ele后面的所有ele2标签; * 》[attribute^=value]：选择每一个attribute属性的值以value开头的元素 * 》[attribute$=value]：选择每一个attribute属性的值以value结尾的元素 * 》[attribute*=value]：选择每一个attribute属性的值包含子字符串value的元素 * 》Ele[attribute=value]:选择属性值等于value的元素 * 》：root:可以选择文档的根元素 * 》：empty：选择文档中所有的空元素 * 》:target：选择激活的元素 </p> <input type="number" min="30" max="100" value="10"/> <input type="text" readonly="readonly" placeholder="123"/> <input type="text" required="required"/>--> <div class="bg-container"></div> <p>111111111111111111111111111111111111111111111111111111111111111111111</p> <div class="gradient"></div> </body></html><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS3变形和动画</title> <link rel="stylesheet" type="text/css" href="css/app.css"/> </head> <body> <!--<div class="button"></div> <div class="canRsize"></div> <div class="box"></div> <div class="transition"></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="ball">球</div>--> <div class="taiji"> <div class="top"></div> <div class="bottom"></div> <div class="leftPoint"></div> <div class="rightPoint"></div> </div> <div class="headerImage"></div> <div class="person"></div> </body></html><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!--设置试口，移动端一般都需要写这个--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <!--设置IE兼容--> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>多列&媒体查询</title> <link rel="stylesheet" type="text/css" href="css/app.css"/> </head> <body> <button class="itemMenu">item</button> <ul> <li><a href="#">ios</a></li> <li><a href="#">java</a></li> <li><a href="#">css</a></li> <li><a href="#">php</a></li> </ul> <div class="container"></div> <div> <h3>舍不得---玄子</h3> <p>第一次你陪我坐着 我的手心是空空的 我知道那些简讯声你努力藏着 还怕我难过 不追问到底为什么 是我最后的温柔 想笑着附和说分开是好的 但我们却怎么 一起哭了 我舍不得 可是时间回不去了 爱你很值得 只是该停了 没有我你要好好的 我舍不得 最后一次抱紧你了 我们错过的 错了就错了 不用担心我 我不爱你了 不追问到底为什么 是我最后的温柔 想笑着附和说分开是好的 但我们却怎么 一起哭了 我舍不得 可是时间回不去了 爱你很值得 只是该停了 没有我你要好好的 我舍不得 最后一次抱紧你了 我们错过的 错了就错了 不用担心我 我不爱你了 至少你记忆里的我 是微笑的 亲爱的 有你牵着我的那些日子 真的好快乐 我舍不得 可是时间回不去了 爱你很值得 只是该停了 没有我你要好好的 我舍不得 最后一次抱紧你了 我们错过的 错了就错了 不用担心我 我走了 </p> </div> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/flex.css"/> </head> <body> <div class="container"> <div class="item">001</div> <div class="item">002</div> <div class="item">003</div> <!--<div class="item">004</div> <div class="item">005</div> <div class="item">006</div> <div class="item">007</div>--> </div> </body></html>》CSS部分代码：
/*h3~p{ color: red;}a[href^="#"]{ color: orange;}input[placeholder*="水"]~p{ color:red;}div p:first-of-type{ color:green;}div p:last-of-type{ border: 1px solid deeppink;}div p:nth-last-of-type(2){ padding: 50px;}div p:nth-of-type(1){ background: chartreuse;}div a:only-of-type{ text-decoration: blink;}/*li:only-child{ color: yellow;}ul :only-child{ color: green;}:root{ background: #123456;}div:empty{ width: 500px; height: 100px; background: yellow;}#news:target{ widows: 100px; height: 100px; background: green;}:enabled{ color: green;}:checked{ width: 50px; height: 50px;}input:not([type="radio"]){ width: 200px; height: 100px;}::selection{ color: sandybrown;}:out-of-range{ width: 6opx; height: 30px; background: white;}:read-only{ color: red;}*/body{ padding: 100px;}.bg-container{ width: 400px; height: 3000px; padding: 30px; border: 20px solid rgba(0,0,0,0.1); background: url(http://d2.lashouimg.com/cms/M00/BA/11/CqgBHlUCmtmASuDeAABj1tqFUG8415.jpg) no-repeat; background-position: center; background-size: cover; background-origin: content-box;/*北京图片相对哪定位*/ background-clip: content-box;/*超过边框的地方就会被裁剪掉*/ background-attachment: fixed;/*背景图片不随滚动而滚动*/ /*border-top-left-radius: 10%; border-top-right-radius: 10%;*/ border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png"); border-image-slice: 27 27; border-image-width: 100px 100px; border-image-outset: 100px;/*边框外沿到内容的距离*/ border-image-repeat: round;/*默认拉伸，repeat和round效果一样*/ box-shadow: #71e525 20px 20px 20px,blue 20px 20px 20px; /*可设置多层阴影*/}p{ width: 200px; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;/*溢出隐藏不换行，设置为省略号*/ text-shadow: #0000FF 5px 5px 3px;}.gradient{ width: 500px; height: 500px; /*background: linear-gradient(45deg, red 10%, white,blue);*/ /*background: radial-gradient(circle 200px at left top,red,yellow);*/ background: repeating-radial-gradient(circle 20px at left top,red,yellow);}body{ padding: 100px; background: #bebebe;}/*.button{ width: 150px; height: 44px; background-color: #ff6b00; /*-webkit-appearance: button;设置外观外button样式 outline: 2px solid #444444;/*设置一个外边线}.button:hover{ outline-offset: 10px;}.canRsize{ width: 150px; height: 44px; background-color: #ff562f; border: 3px solid #dadada;/*设置或者不设置border都可以实现resize overflow: auto; resize: both;/*可放大缩小}.box{ width: 200px; height: 200px; padding: 50px; background-color: #FF6B00; border: 10px solid red; box-sizing: content-box;/*盒子大小以内容为基准 box-sizing: border-box;/*盒子大小以外边框为基准 边框+内边距+内容=width/height}.transition{ width: 100px; height: 100px; background-color: #40ff23; transition: all 3s;/*样式发生改变过程持续3s}.transition:hover{ background-color: #1c70ff; border-radius: 50%;}ul li{ width: 100px; height: 100px; background-color: crimson; float: left; margin-left: 10px; position: relative; }ul li:first-child{ transition: all 3s linear 2s;}ul li:nth-child(2){ transition: all 3s ease 3s;}ul li:nth-child(3){ transition: all 3s ease-in 4s;}ul li:nth-child(4){ transition: all 3s ease-out 5s;}ul li:last-child{ transition: all 3s ease-in-out 6s;}ul li:hover{ height:400px; background-color: yellow; /*box-shadow: #DC143C 2px 3px 5px;}ul li:first-child { animation: jump 2s ease 3s;}@keyframes jump {/*定义关键帧动画 0%{ top:-50px; height: 90px; background-color: #ffa308; } 30%{ top:-100px; height: 80px; background-color: #ff5d2f; } 50%{ top:-60px; height: 120px; background-color: #6cff44; } 80%{ top:-20px; height: 110px; background-color: #ff3fe0; }}.ball{ width: 100px; height: 100px; border-radius: 50%; text-align: center; line-height: 100px; background-color: #ff0800; animation: move 5s linear 1s infinite alternate;}@keyframes move{ from{ transform: translate(0px,0px) rotate(0deg); } to{ transform: translate(700px,-200px) rotate(360deg); /*transform: rotate(180deg); }}*/@keyframes rotate{ from{ opacity: 1; transform:rotate(0deg); } to{ opacity: 0.1; transform:rotate(360deg); }}.taiji{ width: 400px; height: 400px; border-radius: 50%; overflow: hidden; position: relative; animation: rotate 2s linear 0s infinite;}.taiji .top,.bottom{ width: 400px; height: 200px;}.taiji .top{ background: black;}.taiji .bottom{ background: white;}.taiji .leftPoint{ position: absolute; width: 200px; height: 200px; border-radius: 50%; left:0px; top: 25%; background: black; border: 75px solid #FFFFFF; box-sizing: border-box;}.taiji .rightPoint{ position: absolute; width: 200px; height: 200px; border-radius: 50%; right:0px; top: 25%; background: white; border: 75px solid #000; box-sizing: border-box;}.headerImage{ width: 200px; height: 200px; background: url(../img/image.png) no-repeat center; opacity: 0.6; /*transform: skewY(45deg);*/ transform: scale(2); transition: transform 1s,opacity 2s;}.headerImage:hover{ /*transform: skew(50deg,50deg);*/ transform: none; opacity: 1.0;}body{ perspective: 500px;/*设置眼睛到物体的距离*/ perspective-origin:10% 50%;/*设置查看的位置*/}.person{ width: 800px; height: 400px; background: url(../img/people.jpg) no-repeat center; background-size: cover; animation: rotate3D 3s linear infinite; border: 2px solid #000000; transform-origin: 50% 50%;}.person:hover{ transform: rotateX(45deg);}@keyframes rotate3D{ to{ /*transform: rotate3d(1, 1, 1, 360deg);*/ /*transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(0.3);*/ /*transform: translateX(100px) rotateY(-45deg);*/ transform: translateZ(-100px); }}html{ font-size: 16px;}p{ font-size: 1rem;/*根元素字号是16px，1rem就表示16个像素点*/}.container{ width: 10rem; height: 10rem; background-color: paleturquoise;}h3{ column-span: all;/*规定横跨的列数*/}div{ column-count: 5;/*规定列数*/ column-width: 200px;/*规定列的最小宽度*/ column-rule: 3px dashed blue;/*设置分隔线的样式*/ column-gap: 50px;/*设置列与列之间的间距*/ column-fill: auto;/*设置填充样式*/}/*@media (min-width:920px) and (max-width:1200px){ html{ font-size: 30px; background-color: red;当设备宽度在920px-1200px之间的时候出发这些样式 }}*//*手机*/@media (max-width:768px){ html{ background-color: green; font-size: 10px; } ul{ display: none; } .itemMenu{ display: block; }}/*平板*/@media (min-width:768px) and (max-width:992px){ html{ background-color: red; font-size: 16px; } ul{ display: none; } .itemMenu{ display: block; }}/*台式机或者大屏幕*/@media (min-width:992px) and (max-width:1200px){ html{ background-color: yellow; font-size: 22px; } ul{ display: block; } .itemMenu{ display: none; }}ul{ width: 100%;}ul:after{ content: ""; display: block; clear: both;}ul li{ float: left; min-width: 7rem; width: 10%; height: 2rem; border: 2px solid burlywood; box-sizing: border-box; background-color: orange; text-align: center; line-height: 2rem;}.itemMenu{ float: right;}*{ padding: 0; margin: 0;}.container{ width: 80%; height: 600px; margin: 10px auto; display:flex; flex-wrap: wrap; /*justify-content: center; align-items: center;*/ border: 5px solid red; box-sizing: border-box; /*flex-direction: column; flex-direction: column-reverse; flex-direction: row; flex-direction: row-reverse;*/}.item{ /*width: 15rem;*/ height: 13rem; background-color: #0000FF; border: 5px solid black; box-sizing: border-box; text-align: center; line-height: 13rem; color: white;}.container .item:first-child{ order: 5; flex: 1;}.container .item:nth-child(2){ order: 100; flex: 5;}.container .item:nth-child(3){ order: 50; flex: 1; }.container .item:nth-child(4){ order: 10;}.container .item:nth-child(5){ order: 70;}.container .item:nth-child(6){ order: 30;}.container .item:last-child{ order: 40;}6、具体实例
1.css制作3D立方块：
》HTML部分代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/cube.css"/> </head> <body> <ul> <li>前</li> <li>后</li> <li>左</li> <li>右</li> <li>上</li> <li>下</li> </ul> </body></html>》css部分代码
ul{ width: 200px; height: 200px; list-style: none; position: relative; margin: 10% auto; transform-style: preserve-3d; animation: rotate 5s linear 0s infinite;}@keyframes rotate{ from{transform: rotateX(0deg) rotateY(0deg);} to{transform: rotateX(360deg) rotateY(360deg);}}ul li{ width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 40px; opacity: 0.2; position: absolute;}/*前面*/ul li:first-child{ background-color: yellow; transform: translateZ(100px);}/*后面*/ul li:nth-child(2){ background-color: yellowgreen; transform: translateZ(-100px);}/*左面*/ul li:nth-child(3){ background-color: cyan; transform: translateX(100px) rotateY(90deg);}/*右面*/ul li:nth-child(4){ background-color: lightseagreen; transform: translateX(-100px) rotateY(90deg);}/*上面*/ul li:nth-child(5){ background-color: cornflowerblue; transform: translateY(100px) rotateX(90deg);}/*下面*/ul li:last-child{ background-color: skyblue; transform: translateY(-100px) rotateX(90deg);}/*前面*/ul:hover li:first-child{ background-color: yellow; transform: translateZ(150px);}/*后面*/ul:hover li:nth-child(2){ background-color: yellowgreen; transform: translateZ(-150px);}/*左面*/ul:hover li:nth-child(3){ background-color: cyan; transform: translateX(150px) rotateY(90deg);}/*右面*/ul:hover li:nth-child(4){ background-color: lightseagreen; transform: translateX(-150px) rotateY(90deg);}/*上面*/ul:hover li:nth-child(5){ background-color: cornflowerblue; transform: translateY(150px) rotateX(90deg);}/*下面*/ul:hover li:last-child{ background-color: skyblue; /*transform: translateY(-150px) rotateX(90deg);*/ animation: move 1s; animation-fill-mode: forwards;/*当动画执行到最后一次的时候他就固定在那个位置了*/} @keyframes move{ to{transform: rotateX(90deg) translateZ(250px);}}2、制作双层嵌套立方块
》HTML部分代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/dcube.css"/> </head> <body> <div class="container"></div> <script src="js/dcube.js" type="text/javascript" charset="utf-8"></script> </body></html>》css部分代码：
position: relative;}ul { animation: rotate 5s linear 0s infinite;}@keyframes rotate { from{ transform: rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateY(360deg); }}》js部分代码：
(function(){ function cube(className){ var width=className==="out-cube"?400:200; var ul=document.createElement("ul"); ul.setAttribute("class",className); //判断是否是是里面的还是外面的那个立方块 className==="out-cube"?ul.style.cssText="width:"+width+"px;height:"+width+"px;list-style: none;position:absolute;margin: 10% auto;transform-style: preserve-3d;animation: rotate 5s linear 0s infinite;":ul.style.cssText="width:"+width+"px;height:"+width+"px;list-style: none;position:absolute;margin: 10% auto;transform-style: preserve-3d;animation: rotate 5s linear 0s infinite;top:100px;left:100px;"; //将立方体每个面的样式存到数组中 var styles=["background-color: yellow;transform: translateZ("+width/2+"px);","background-color: yellowgreen;transform: translateZ("+-width/2+"px);","background-color: cyan;transform: translateX("+width/2+"px) rotateY(90deg);","background-color: lightseagreen;transform: translateX("+-width/2+"px) rotateY(90deg);","background-color: cornflowerblue;transform: translateY("+width/2+"px) rotateX(90deg);","background-color: skyblue;transform: translateY("+-width/2+"px) rotateX(90deg);"]; //循环创建立方体的每个面 for(var i=0;i<styles.length;i++){ var li=document.createElement("li"); li.style.cssText=styles[i]+"opacity:0.4;width:"+width+"px;height:"+width+"px;position:absolute;"; ul.appendChild(li); }; return ul; } function init(){ //创建立方块并且将它添加到父容器中 document.querySelector(".container").appendChild(cube("out-cube")); document.querySelector(".container").appendChild(cube("in-cube")); } init();})();3、制作魔方：
》方法和制作3D立方块的方法是一样的，只需要在每个li里面添加3x3=9（可设置n x n的魔方）个div,然后再cssdiamante里面设置下每个div的样式即可。
ul li div{ width: 54px; height: 54px; border: 3px solid black; border-radius: 5px; float: left;}阅读全文
0 0
- 小白入门---CSS3新属性
- css3 新属性
- css3新属性
- Css3文本新属性
- css3 新属性
- CSS3 新属性
- CSS3 新属性
- CSS3新属性
- CSS3的新属性
- css3新属性汇总
- css3边框新属性
- css3新属性text-shadow
- css3的Background新属性
- CSS3的新属性animation
- CSS3新属性box-sizing
- CSS3的一些新属性
- css3 的一些新属性
- 一些新的css3 属性
- Online Object Tracking : A Benchmark 翻译
- chenw Hibernate 缓存机制
- Python小记--二进制方式文件读写实践
- Matlab编写乐曲
- soj2222_01背包变形
- 小白入门---CSS3新属性
- 机器学习实战笔记4
- 1015. 德才论 (25)
- BZOJ 3730 震波
- 【NOIP提高组模拟A组8.15】膜法师 (Standard IO)
- 学生管理系统总结
- 项目用到的一个资源管理类
- redis数据类型
- 阿里内推一面记录
