为了账号安全,请及时绑定邮箱和手机立即绑定
  • border-radius:100px / 10px; /*border-radius的含义是:圆角。*/ /*border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。写成椭圆*/ 做曲线阴影椭圆有弯曲感
    查看全部
  • border-radius的含义是:圆角。 border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。
    查看全部
  • :before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
    查看全部
  • content:""在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。 这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。
    查看全部
  • z-index:该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
    查看全部
  • 啊,研究了一会儿,终于看懂了。。 这个效果是这么实现的: 1、box背景色设为橙色的圆形 2、box中子元素包括单选按钮radio(默认样式)和span(背景为白色圆形,我们的自定义样式),但是radio不显示(因为是完全透明的) 3、被选中的单选按钮和span会显示(完全不透明),而未被选中的单选按钮不显示(因为是完全透明的)
    查看全部
  • ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和content配合使用,使用的场景最多的就是清除浮动
    查看全部
  • CSS3选择器 ::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)都添加一个空元素,然后为这两个空元素添加阴影特效。
    查看全部
  • div id=brand等于锚点的<a href="#brand"></a>
    查看全部
  • position:absolute;top:50%;left:50%;//使得div位于窗口的中间位置 transform:translate(-50%,-50%); translate的百分比是根据自身的宽度和高度来定的
    查看全部
  • background-clip用来将背景图片做适当的剪裁以适应实际需要
    查看全部
  • css3背景background-origin:设置元素背景图片的原始起始位置 background-origin:border-box:从边框开始显示 background-origin:padding-box:从内边框(默认值)开始显示 background-origin:content-box:从内容区域开始显示
    查看全部
  • 假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性,那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时,那么all代表的就是“width”和“height”。
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 使用伪元素制作导航列表项分隔线*/ .nav li:after/用于在元素后插入新内容/{ content:""/保证容器够用/; position:absolute; top:17px; right:0px; /li中定位由于padding为16px则top为16px 紧靠右/ width:1px; height:15px; /大小/ background:linear-gradient(to bottom, #f82f87,#A24,#f82f87); /渐变颜色的自做背景图,用于li中/ } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child::after{background:none;}/最后li的after伪元素/ .nav a,
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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