在使用css进行网页布局中，常常需要用到圆角，在css中，主要通过border-radius属性来设置圆角的大小。下面小编举例讲解如何用CSS实现圆角描边。

工具/原料

  • html+css
  • 代码编辑器：Dreamweaver CS5

方法/步骤

  1. 1

    新建一个html文件，命名为test.html，用于讲解如何用CSS实现圆角描边。

  2. 2

    在test.html文件内，使用div创建一个模块，并设置div的class属性为setdiv，主要用于下面通过该class来设置css样式。

  3. 3

    在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。

  4. 4

    在css标签内，通过class类名setdiv来设置div的样式，使用width设置div的宽度250px，使用height设置div的高度为250px。

  5. 5

    在css标签内，再使用border来设置div的边框，边框线大小为1px，边框线为实线，边框线的颜色为红色。

  6. 6

    在css标签内，使用border-radius来设置div圆角的大小，例如，这里设置为30px，圆角属性值越大，圆角越大。

  7. 7

    在浏览器打开test.html文件，查看实现的效果。

    END

总结:

  1. 1

    1、创建一个test.html文件。

     

    2、在文件中，使用div标签创建一个模块。

     

    3、在css样式中，设置div的高度、宽度、边框线样式，然后再使用border-radius属性设置圆角的大小，实现圆角描边的效果。
    END

注意事项

  • 在实际开发中，常常会加上-moz-border-radius属性来提高对旧版浏览器的兼容性。
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。