为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。 比如: p { font-size :12px; font-family : "My Font"; /*必须项,设置@font-face中font-family同样的值*/ }
    查看全部
  • text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出 语法:text-overflow:clip[表示剪切]|ellipsis[表示显示省略标记] 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。 语法:word-wrap:normal[表示控制连续文本换行]|break-word[表示内容将在边界内换行] normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可
    查看全部
  • linear-gradient[渐变类型径向为radial]( to bottom[渐变方向,等价于180deg],#fff[表示颜色的起始点],#999[表示颜色的结束点]{可以有两至多个色值}) 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示 角度 用英文 作用 0deg to top 从下向上 90deg to right 从左向右 180deg to bottom 从上向下 270deg to left 从右向左 to top left 右下角到左上角 to top right 左下角到右上角 第一个参数省略时,默认为“180deg”,等同于“to bottom”。 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    查看全部
  • RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。 代码示例: background-color:rgba(100,120,60,0.5);
    查看全部
  • border-image:url(图片路径) 70 70 70 70(切割图片的宽度,单位为像素,但省略PX也可以使用百分比,遵循顺时针的规律来分别设置,也可以简写为70) repeat(图片延伸方式:三个可选参数分别为:round(平铺),repeat(重复),stretch(拉伸))
    查看全部
  • 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
  • 没啥好说的,和nth-child一样,就是倒过来数
    查看全部
  • ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} 当然可以利用他们制作出其他更好的效果,比如右侧中的阴影效果,也是通过这个来实现的。 关键代码分析: .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } 上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。
    查看全部
  • “:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。
    查看全部
  • “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”
    查看全部
  • :checked选择器 在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
    查看全部
  • “:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
    查看全部
  • 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
    查看全部
  • 太强大了,一块一块拼的。。。心服口服啊
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2015-05-08

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!