zoukankan      html  css  js  c++  java
  • CSS3圆角详解第一辑

    有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角。
    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。

    一.CSS3圆角的优点
    在没有出现圆角属性之前,传统的制作圆角的方式就是拜托美工给我们出一张图片了,那么我们就需要使用多张图片作为背景图。

    CSS3的出现为我们省了很多时间并且提高了工作效率。简单的总结了以下几个优点:
      * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不需要了。
      * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
      * 增加视觉可靠性。一些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

    二.border-radius属性
    CSS3圆角很简单,只需要设置一个属性,border-radius边框半径,可以接受一个至四个属性值:
    1.一个值:
    border-radius:15px;

    这条语句的意思是div的四个角都是以15px为半径画圆,形成四周的一个圆角。

    2.两个值:
    border-radius:15px 50px;

    这条语句的意思是div的四个角是以顺时针顺序为主,没有值的与对角相同,左上15px 右上50px 右下与对角左上相同15px 左下与右上相同50px,形成四周的一个圆角。

    3.三个值:
    border-radius:0px 30px 50px;

    这条语句的意思是div的四个角是以顺时针顺序为主,没有值的与对角相同,左上0px 右上30px 右下50px 左下与右上相同30px,形成四周的一个圆角。

    4.四个值:
    border-radius:0px 30px 50px 100px;

    这条语句的意思是div的四个角是以顺时针顺序为主,左上0px 右上30px 右下50px 左下100px,形成四周的一个圆角。

    当然单位不仅仅可以是px像素值,还可以是em,ex,百分比等等

    到目前为止,通过border-radius属性的四个值的不同设置,可以达到不同的圆角效果,其实在工作中我们使用圆角最多的地方就是在做圆了,圆形很简单,首先你要保证div是一个正方形,然后设置border-radius的值为正方形边长的一半就是圆了。
    200px;
    height:200px;
    border-radius: 100px;

    现在是不是对border-radius属性清楚很多,快去试试吧!
    感谢上海尚学堂H5前端技术支持,欢迎点击访问获得更多前端实用技术资料知识。

  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/shsxt/p/8136414.html
Copyright © 2011-2022 走看看