简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

圆角border-radius属性介绍？（代码介绍）

PHPz
发布： 2018-10-23 10:22:57
转载
2144 人浏览过

本篇文章给大家带来的内容是关于圆角border-radius属性介绍？（代码介绍），有一定的参考价值，有需要的朋友可以参考一下.


我们在很多网站包括都经常能看到圆角的效果。从用户体验和心理来说，圆角效果往往更为美观大方。

在CSS2.1中，给元素实现圆角效果是很头疼的一件事。老办法都是使用背景图片来实现，制作起来相对的麻烦。但是CSS3中border-radius属性的出现，完美地解决了圆角效果难以实现的问题。

此外，在前端开发中，对于网页设计，我们都是秉着“尽量少用图片”的原则，能用CSS实现的效果，就尽量不要使用图片。因为图片需要引发http请求，并且传输量大，影响网页加载性能。就像教程文章下方的这些小图标都是使用“自定义小图标字体”来实现，而不是使用图片来实现。在CSS进阶教程，我们有机会再给大家详细探讨一下“自定义小图标字体”的技巧。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:10px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>
登录后复制

在浏览器预览效果如下：

7-2-4.png

相关标签：
圆角border-radius 属性介绍
来源：cnblogs.com
上一篇：ie6兼容问题记录_html/css_WEB-ITnose 下一篇：iframe父子页面操作-比较好用的两个方法-window.parent/oframe.contentWindow.document_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
边框半径不适用于锚点内的 img 我正在使用以下HTML代码：<aclass="-video-detail-qualifiers-branding"><imgsrc="...
来自于 2024-04-06 17:20:25
0
1
347
定位 div 困难 我想相对于页面上的其他元素放置一个div。这是初始CSS：#puzzle{display:inline-block;vertical-align:top;(position:sta...
来自于 2024-04-04 12:14:58
0
1
380
如何仅在水平滚动条上应用CSS 我是一名新实习生，他们给了一个简单的任务：个性化水平滚动条我有这段代码，但垂直滚动条消失了...我需要它在垂直方向上默认...只有水平滚动条必须个性化。::-webkit-scro...
来自于 2024-04-01 16:25:15
0
2
291
如何悬停在一个对象上，使其消失，然后另一个对象出现，以便我可以点击它？ 我的第一个对象是“dog-letter”类的对象。它有两个类为“狗”和“字母”的对象。我设法让它在悬停后消失。我的第二个对象是一个带有“狗鼻子”类的黑色圆圈。但是这个对象出现后我无...
来自于 2024-04-01 13:23:16
0
1
355
Flexbox 设计：我希望文本气泡的各个侧面都接触 .fm-bubbles{显示：flex;flex-wrap:wrap;宽度:100%;高度:100px;}.fm-bubbles{flex:1110%;高度:最大内容;边框:1px...
来自于 2024-04-01 10:59:44
0
1
273
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！