CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓-css教學-PHP中文網

首頁

web前端

css教學

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

yulia

Sep 07, 2018 pm 01:53 PM

border-radius圓角

CSS3中border-radius用來實現圓角的效果，以下詳細介紹它的用法，最後用實例講解，如何用border-radius畫一個圓。

border-radius 屬性是一個簡寫屬性，用來設定四個 border-*-radius 屬性。
註：如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。它的值可以是長度值，也可以是百分之百。
當給四個值時，分別是左上角，右上角，右下角，左下角。即border-top-left-radius ， border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius
當給三個值時，分別代表左上角，（右上角、左下角），右下角
當給兩個值時，分別代表（左上角、右下角），（右上角、左下角）
當給一個值時，代表四個角一樣的效果

範例1：給一個值

div{width: 150px;height: 150px;border-radius: 15%;background: red;}

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例2：給兩個值

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例3：給三個值

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

##範例4：給四個值

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例：用border-radius作出一個圓

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
   .a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="a2">HELLO</div>
  </div>
 </body>
</html>

效果圖：

以上是對圓角的詳細介紹，初學者可以多去嘗試練習！

以上是CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

修改win11窗口边角为圆角的指南Dec 31, 2023 pm 08:35 PM

很多朋友更新好win11系统后，发现win11的界面窗口采用了全新的圆角设计。但是一些人觉得不喜欢这个圆角设计，想要将它修改为曾经的界面，但是却不知道怎么修改，下面就一起来看看吧。win11怎么修改圆角1、win11的圆角设计时内置的系统设置，目前无法修改。2、所以大家如果不喜欢使用win11的圆角设计的话，可以等待微软提供修改的方法。3、如果实在使用起来不习惯，还可以选择退回曾经的win10系统。4、如果大家不知道如何回退的话，可以查看本站提供的教程。5、要是使用上方教程无法进行回退的话，还可

win10搜索框圆角调整方法Jan 15, 2024 pm 03:12 PM

win10搜索框可变圆角的消息已经有很长的时间，但一直没有实现，我们一般可以使用注册表体验一下win10搜索框变圆角，那么下面我们一起看看win10搜索框可变圆角教程吧。win10搜索框可变圆角：1、打开搜索框，输入regedit，进入注册表。2、计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search找到此路径。3、在空白处，选择新建——DWORD（32位）值——将新键命名为ImmersiveSearch——数

CSS 形状属性优化技巧：border-radius 和 clip-pathOct 21, 2023 am 09:18 AM

CSS形状属性优化技巧：border-radius和clip-path在CSS中，我们经常使用一些属性来调整元素的形状，以使其更加吸引人和视觉上的吸引力。其中两个常用的属性是border-radius和clip-path。本文将详细介绍这两个属性，并提供一些优化技巧，以及具体的代码示例。一、border-radius属性border-radius属性用

cad倒圆角倒不了是怎么回事Feb 27, 2024 pm 12:10 PM

在使用AutoCAD时，有时会遇到执行倒圆角命令(Fillet)时遇到问题的情况。即使您遵循了正确的步骤，程序仍无法正常运行。这可能是由多种因素引起的，例如所选线段未相交、线段间距太短、倒角半径太大，或CAD软件的设置问题等。那么这篇教程攻略就将为大家详细介绍解决办法，希望能帮助到大家。cad倒圆角倒不了的原因，主要是修剪模式设置了不修剪，把修剪模式设置修剪即可。具体介绍如下：1、打开CAD2023软件，创建一个矩形出来。如下图：2、点击圆角工具，如下图：3、输入R空格，点击半径(R)。如下图：

CSS 环形布局属性详解：border-radius 和 transformOct 21, 2023 am 11:46 AM

CSS环形布局属性详解：border-radius和transform一、简介在网页设计中，环形布局常常用于创建圆形的元素，如按钮、头像等。实现环形布局的两个关键CSS属性是border-radius和transform。本文将详细介绍如何使用border-radius和transform属性来创建环形布局，并提供具体的代码示例。二、border-ra

css怎么将边框设置为圆角Sep 14, 2021 pm 04:21 PM

在css中，可以利用border-radius属性来将边框设置为圆角，只需要给边框元素添加“border-radius:半径值;”样式，即可同时设置四个圆角的半径，将边框的四个角都设置为圆角。

解决win11没有圆角和通知的方法Dec 31, 2023 pm 09:53 PM

更新了win11之后发现原先在win10系统上的通知不见了，里面也没有了圆角功能让很多用户都直呼用不习惯，所以今天就给你们带来了win11没有圆角没有通知解决方法，快来一起看看怎么操作吧。win11没有圆角没有通知怎么办：1、首先进入win11系统的桌面。2、然后点击桌面右下角的“！”选项。3、此时即可弹出圆角通知。4、每次使用的时候都必须和日历弹出这一点得到了很多用户的吐槽，但是由于win11系统还处于初期，后面慢慢的肯定会进行改善的。

CSS布局技巧：实现圆角卡片效果的最佳实践Oct 20, 2023 am 11:10 AM

CSS布局技巧：实现圆角卡片效果的最佳实践引言：随着网页设计的不断发展，圆角卡片效果成为了现代化的网页设计中常见的元素之一。通过使用CSS布局技巧，我们能够轻松地为网页添加具有美观效果的圆角卡片。本文将介绍实现圆角卡片效果的最佳实践，并提供具体的代码示例供参考。一、使用CSS的border-radius属性创建圆角效果在CSS中，我们可以使用border-r

See all articles