-
background-clip用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。查看全部
-
background-origin设置元素背景图片的原始起始位置。 语法background-origin：border-box|padding-box|content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 需要注意的是:如果背景不是no-repeat，这个属性无效，它会从边框开始显示。查看全部
-
结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素查看全部
-
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素查看全部
-
结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;}查看全部
-
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。查看全部
-
结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的URI的某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个#号，后面带有一个标志符名称 HTML代码： <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> CSS代码： .menuSection p { display: none; } :target p { display:block; }查看全部
-
结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p> CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }查看全部
-
结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 例如 input:not([type="submit"]){ border:1px solid red; }查看全部
-
结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 :root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE９以下还可以借助“:root”实现hack功能。查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作3D旋转导航</title> <style> @import url("http://www.w3cplus.com/demo/css3/base.css"); /*任务一：引入本地字体文件*/ @font-face { font-family: 'sansationregular'; src: url('http://www.w3cplus.com/demo/css3/3DA查看全部
-
* 含有 任意位置 ^ 开头 $ 结尾查看全部
-
属性选择器 实例展示： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }查看全部
-
border-radius实现圆角 box-shadow实现阴影 伪元素与渐变实现分割线 :before{content""; width:1px; height:25px; position:absolute; top:15px; left:0; background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); } :after{ ...}查看全部
-
border-radius实现圆角 box-shadow实现阴影 伪元素与渐变实现分割线 :before{content""; width:1px; height:25px; position:absolute; top:15px; left:0; background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); } :after{ ...}查看全部
举报
0/150
提交
取消