简体中文(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=&quo...
來自於 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-scr...
來自於 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學習者快速成長！