为了账号安全,请及时绑定邮箱和手机立即绑定

CSS圆角进化论

难度初级
时长 1小时 5分
学习人数
综合评分9.60
103人评价 查看评价
9.7 内容实用
9.7 简洁易懂
9.4 逻辑清晰
  • CSS圆角进化论-制作高度和宽度自适应圆角: 5个div构成: 1个为box:上下内边距大小至少设置为圆角高度、设置相对定位、放置内容。 另外4个为圆角:分别设置上下左右各个圆角背景图片、绝对定位于box的4个角。
    查看全部
  • 测试工具:IETester
    查看全部
  • 【浏览器私有前缀】 IE内核:-ms- Firefox内核:-moz- 谷歌浏览器,safari内核:-webkit- Opera浏览器私有前缀:-o- 用在CSS3一些新增属性中,例如背景渐变色属性: background:-webkit-linear-gradient(top:#ddd o%,#eee 10%,#fff 20%);
    查看全部
  • border-radius: 四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的(左上、右上、右下、左下)。 注意和margin属性顺序区分。(margin的话是上右下左) 如果省略 bottom-left,则与 top-right 相同。 如果省略 bottom-right,则与 top-left 相同。 如果省略 top-right,则与 top-left 相同。 【border-radius的效果显示要以border设置为基础】 如果反斜杠符号“/”存在,“/”前面的值是设置元素圆角的水平方向半径, “/”后面的值是设置元素圆角的垂直方向的半径; 如果没有“/”,则元素圆角的水平和垂直方向的半径值相等。 例: border-radius: 2em 1em 4em / 0.5em 3em; 等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
    查看全部
  • CSS2.0+HTML标签模拟圆角 【原理】应用像素画中绘制弧线的方法进行模拟。【像素画】俄罗斯方块,超级玛丽 【优缺点】 1. 代码量少,不需要增加HTTP请求 2. 后期维护性好,但是圆角橡塑的增加 3. 无意义代码将成倍增加 4. 实现的圆角有局限性 5. 只能实现纯色圆角 没有被广泛运用
    查看全部
  • CSS圆角经历的3个阶段:背景图片 → CSS2.0 + 标签模拟 → CSS3.0 圆角属性(border-radius属性)。
    查看全部
    0 采集 收起 来源:课程介绍

    2015-08-21

  • 浏览器私有前缀
    查看全部
  • 私有浏览器前缀:IE内核:-ms- FireFox内核:-moz- Google Chrome,safari内核:-wenkit-
    查看全部
  • border-radius: 四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的。 注意和margin属性顺序区分。(margin的话是上右下左) 如果省略 bottom-left,则与 top-right 相同。 如果省略 bottom-right,则与 top-left 相同。 如果省略 top-right,则与 top-left 相同。 如果反斜杠符号“/”存在,“/”前面的值是设置元素圆角的水平方向半径, “/”后面的值是设置元素圆角的垂直方向的半径; 如果没有“/”,则元素圆角的水平和垂直方向的半径值相等。 例: border-radius: 2em 1em 4em / 0.5em 3em; 等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
    查看全部
  • CSS圆角进化论-制作高度和宽度自适应圆角: 5个div构成: 1个为box:上下内边距大小至少设置为圆角高度、设置相对定位、放置内容。 另外4个为圆角:分别设置上下左右各个圆角背景图片、绝对定位于box的4个角。 需要注意: 绝对定位要设置宽度,不然会根据内容多少自适应; 只有背景图片的div也要设置宽度,不然背景显示不出来,因为背景图片本身不占宽度。
    查看全部
  • css圆角三个阶段: 1、背景图片实现 2、css2.0+标签模拟圆角 3、css3.0圆角属性(border-radius属性)实现
    查看全部
    0 采集 收起 来源:课程介绍

    2015-08-14

  • border-radius属性值设置与margin的四个属性相同,顺时针方向。 border-radius属性必须与border属性共同使用,不设置border属性,border-radius就不起作用。
    查看全部
  • 画像素法分析(没有广泛应用):
    查看全部
  • 宽度和高度都自适应的圆角矩形
    查看全部
  • border-radius: 四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的。 注意和margin属性顺序区分。 如果省略 bottom-left,则与 top-right 相同。 如果省略 bottom-right,则与 top-left 相同。 如果省略 top-right,则与 top-left 相同。 如果反斜杠符号“/”存在,“/”前面的值是设置元素圆角的水平方向半径, “/”后面的值是设置元素圆角的垂直方向的半径; 如果没有“/”,则元素圆角的水平和垂直方向的半径值相等。 例: border-radius: 2em 1em 4em / 0.5em 3em; 等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
    查看全部

举报

0/150
提交
取消
课程须知
1.具备HTML+CSS知识基础;2.对PS切图有一定的了解;3.对CSS3的圆角属性属性。
老师告诉你能学到什么?
1.三种方式制作圆角;2.了解每种方式的优劣,并根据实际情况进行选择。

微信扫码,参与3人拼团

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

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