代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆角边框常用写法</title><style>.yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50% 就是宽度和高度的一半  等价于 100px */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}.radius {width: 100px;height: 200px;/* border-radius: 10px 20px 30px 40px; *//* border-radius: 10px 40px; */border-top-left-radius: 100px;border-bottom-left-radius: 100px;background-color: pink;}</style>
</head><body>1. 圆形的做法:<div class="yuanxing"></div>2. 圆角矩形的做法:<div class="juxing"></div>3. 半圆形:<div class="radius"></div>
</body></html>

效果：

利用border-radius制作圆形、圆角矩形、半圆相关推荐

html圆角矩形的渐变色,canvas圆角矩形 PS制作渐变圆角矩形：方法一：
用canvas画只有一个角是圆角的矩形,能画出来么? CSS布局HTML小编今天和大家分享各位大侠指点, 找到方法了float[] radii={12f,12f,0f,0f,0f,0f,0f,0f}; ...
PhotoShop制作空心圆角矩形
PhotoShop制作空心圆角矩形教程如下: 在线学习:PhotoShop制作空心圆角矩形以上就是关于"PhotoShop制作空心圆角矩形"的全部内容.
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理以上是效果方法如下: 1:用photoshop打开原图,并取消背景锁. 2:选"工具栏"的"圆角矩形 ...
photoshop轻松制作清晰圆角矩形的描边
转自:http://goodboy5264.blog.163.com/blog/static/25382982009931102654887/ 看标题大家不知道是否明白,不明白的看下效果图,有经验的设 ...
Android 两种制作圆形/圆角图片的方法
前言: 目前网上有很多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这种结束也是Android开发必备技能 ,所以今天就来简单研究一下 ...
HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦
旋转太极图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
自定义圆角矩形图片/圆形图片
图片的圆形/圆角矩形的处理方式有很多,网上也有很多例子,最近项目比较清闲,就试着自己写了一个通用的图片处理,可以根据参数的不同自动生成原型图片或者圆角矩形图片的自定义view大致的效果如下图,两个vi ...
画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小源代码: fun ...
长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...

利用border-radius制作圆形、圆角矩形、半圆

代码：

效果：

利用border-radius制作圆形、圆角矩形、半圆相关推荐

最新文章

热门文章