慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕工程2957023

CSS3选择器 :read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。示例演示使用“:read-write”选择器来设置不是只读控件的文本框样式。

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2016-11-19
慕工程2957023

placeholder属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。第二十节 :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
慕工程2957023

注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-11-19
慕工程2957023

::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。 HTML代码： <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p> CSS代码： //在FF浏览器需要添加前缀 ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2018-03-22
慕工程2957023

单选按钮被选中后有一个样式谁被选中谁就有那个样式默认情况下都有这个span是个小白点,但是是透明的看不见当你的状态时checked的时候opacity的值就变成1. input[type="radio"]+span{ opacity:0; } input[type="radio"]:checked+span{ opacity:1; }

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22
慕工程2957023

css + 表示相同父类下，相邻的同胞元素 input[type="checkbox"] + span { opacity: 0; } 这个表示与复选框相同父元素下的span

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22
慕粉3965217

CSS3边框为边框应用图片 border-image 想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？图片会自动被切割分成四等分。用于四个边框。可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，是不是像传说中的九宫图，如下：我们把上图当作边框图片来应用一下，看一看是什么效果根据border-image的语法： #border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat } 效果：从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的，下图的样子： repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。 Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）； #border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; } 效果：可见图片被压扁了。 Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。 border-image:url(borderimg.png) 70 stretch 看一下效果： 2,4,6,8分别被拉伸显示。注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。 Firefox 26.0 下是可以准确区分的。

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-11-19
慕工程2957023

1. :disabled选择器 “:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。 2.示例演示通过“:disabled”选择器，给不可用输入框设置明显的样式。 3.HTML代码： <form action="#"> <div> <input type="text" name="name" id="name" placeholder="我是可用输入框" /> </div> <div> <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled /> </div> </form> CSS代码 form { margin: 50px; } div { margin-bottom: 20px; } input { background: #fff; padding: 10px; border: 1px solid orange; border-radius: 3px; } input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); }

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2018-03-22
慕工程2957023

CSS3选择器 :enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”和“disabled”对这些表单元素设置样式。示例演示通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。 HTML代码: <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </div> </form> CSS代码： div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red;

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
慕粉3965217

CSS3边框阴影 box-shadow（二） 1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; } 效果图： Y轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; } 效果图：

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-11-18
慕粉3965217

CSS3边框阴影 box-shadow（一） box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍：注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。为元素设置外阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; } 效果：为元素设置内阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 效果：添加多个阴影：以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } 效果：

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-11-18
qq_丹_23710224

animation-iteration-count:定义动画播放次数 infinite，动画将无限次播放

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2016-11-18
慕工程2957023

only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-11-18
慕工程2957023

：noly-child选择器选择的是父元素中只有一个子元素而且是唯一的子元素。语法实例： p:only-child{background:red；} <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>

查看全部

0 采集收起来源：CSS3 only-child选择器
2018-03-22
慕工程2957023

:nth-last-of-type（n）与：nth-of-child（n）相对应，选择的是父元素中指定的某种子元素类型，他的起始方向是从最后一个子元素开始的。语法如下：：nth-last-of-type（n）

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2016-11-18

首页上一页 359 360 361 362 363 364 365 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果