css实现圆角

css2.1给元素添加圆角是一件很麻烦的事，老办法是用背景图片实现，制作比较麻烦。css3，border-radius的属性，使圆角属性得到完美的解决。

语法

border-radius:长度值;

说明：

长度值可以是px、百分比、em等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆角实现</title>

    <style type="text/css">

        div{

            width: 100px;

            height: 50px;

            border-radius: 10px;

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

设置border-radius:10px;设置的四个圆角半径都是10px

border-radius属性值有四个写法（同margin、padding相似）

（1）border-radius:一个值;

结果如上图

（2）border-radius:两个值;

例如:border-radius:10px 20px;表示左上角、右下角为10px，右上角、左下角为20px；

结果

（3）border-radius:设置三个值;

例如:border-radius:10px 20px 30px;表示左上角、右上角和左下角、左下角的圆角半径依次是10px、20px、30px

结果

（4）border-radius:设置四个值

例如:border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圆角半径依次是10px 20px 30px 40px

结果

实现下图效果：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆角实现</title>

    <style type="text/css">

        div{

            width: 50px;

            line-height: 50px;

            border-radius:80% 90% 100% 20%;

            background-color: black;

            color: white;

            text-align: center;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>6</div>

</body>

</html>

CSS图形——实现圆角的更多相关文章

  1. 美丽的CSS图形和HTML5

    1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  2. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  3. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  4. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  5. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  6. css输入框的圆角

    转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方 ...

  7. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  8. 有趣的css图形实现

    css通过 border .border-radius .transform,实现各种图形. <!DOCTYPE html> <html lang="en"> ...

  9. 利用噪声构建美妙的 CSS 图形

    在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...

随机推荐

  1. Hbase 读写 原理

    客户端读取信息流程 ()client要读取信息,先查询下client 端的cache中是否存在数据,如果存在,刚直接返回数据.如果不存在,则进入到zookeeper,查找到里面的相应数据存在的Root ...

  2. jmeter如何玩之badboy + jmeter并发性能测试

    今天下班时公司安排了一个同事来对项目做集群性能测试,怀着对性能测试的好奇心,下班后没有着急离开,而是等待 那位同事的到来,然后在旁边学习了下如何使用Badboy和jmeter做性能测试. 1. 软件介 ...

  3. 模块_pip、os模块

    一个python文件就是一个模块 1.标准模块 python自带的模块就是标准模块,也就是可以直接import进来的就是标准模块 import json import random import da ...

  4. C++ STL 顺序容器--list + 关联容器

    list 双向链表,可以双向遍历,既指向前驱节点,又指向后继但不能随机访问任意元素,可动态增加或者减少元素,内存管理自动完成,增加任何元素都不会使迭代器失效, 删除元素时,除了指向当前被删元素的迭代器 ...

  5. SSH服务理论+实践

    1)远程管理服务知识介绍 SSH远程登录服务介绍说明 01. SSH-Secure Shell Protocol 安全加密shel协议 SSH远程登录服务功能作用 01. 提供类似telnet远程登录 ...

  6. Python制作AI贪吃蛇

    前提:本文实现AI贪吃蛇自行对战,加上人机对战,文章末尾附上源代码以及各位大佬的链接,还有一些实现步骤,读者可再次基础上自行添加电脑VS电脑和玩家VS玩家(其实把人机对战写完,这2个都没什么了,思路都 ...

  7. JS设计模式（3）代理模式

    什么是代理模式? 情景:小明追女生 A 非代理模式:小明 =花=> 女生A 代理模式:小明 =花=> 让女生A的好友B帮忙 =花=> 女生A 定义:为其他对象提供一种代理以控制对这个 ...

  8. G711 G723 G729线路占多少带宽问题

    G.711   G.711   也称为PCM(脉冲编码调制),是国际电信联盟订定出来的一套语音压缩标准,主要用于电话.它主要用脉冲编码调制对音频采样,采样率为8k每秒.它利用一个 64Kbps 未压缩 ...

  9. 彻底删除windows残留启动引导

    在win7/Win8系统下安装其他系统或者一键重装系统后,安装的系统删除或者一键重装文件删除了,在windows启动管理器中还残留了启动引导选项,影响开机效率. 在系统配置中有些"引导&qu ...

  10. Mac OS X 避免产生临时文件 .DS_Store

    参考: 删除Mac中所有 .DS_Store 隐藏文件 Mac OS X 避免产生临时文件 .DS_Store .DS_Store 隐藏文件保存针对目录的特殊信息和设置配置,例如查看方式,图标大小以及 ...