CSS图形——实现圆角
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图形——实现圆角的更多相关文章
- 美丽的CSS图形和HTML5
1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- css图形——三角形
1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- 奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】
http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
- css输入框的圆角
转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- 有趣的css图形实现
css通过 border .border-radius .transform,实现各种图形. <!DOCTYPE html> <html lang="en"> ...
- 利用噪声构建美妙的 CSS 图形
在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...
随机推荐
- hive 调优手段
调优手段 ()利用列裁剪 当待查询的表字段较多时,选取需要使用的字段进行查询,避免直接select *出大表的所有字段,以免当使用Beeline查询时控制台输出缓冲区被大数据量撑爆. ()JOIN避免 ...
- 【学习笔记】《Python从入门到实践》游戏-Alien Invasion
主模块alien_invasion.py #导入两个库 2 from settings import Settings from ship import Ship import game_functi ...
- PHP 批量操作删除,支持单个删除
PHP 执行部分: <?php include('checkadmin.php'); header('Content-Type: text/html; charset=utf-8'); if( ...
- 《CSS世界》读书笔记(二)
<!-- <CSS世界> 张鑫旭著 --> 块级元素:水平流上只能单独显示一个元素 <li>元素默认的display值是list-item,是块级元素 块级盒子( ...
- 爬虫----BeautifulSoup模块
一.介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...
- wm_concat函数oracle 11g返回clob
用wm_concat连接拼接字符串,测试环境是10g,一切正常 到了生产环境是11g,点开直接报错了 wm_concat函数在oracle 10g返回的是字符串,到了11g返回的是clob 解决办法: ...
- Sci_DRead_ParaBuzzerDriver_st_BuzzerSoundOpening1
extern uint16 Sci_DRead_ParaMotorGroupB_u16_Motor1CinchDoneCurrent1(); * \violation 1503 The functio ...
- hadoop+kerberos常用运维命令
kerberos相关: kadmin.local //以超管身份进入kadmin kadmin //进入kadmin模式,需输入密码 kdb5_util create -r JENKIN.COM -s ...
- Spring-AOP环绕监听出错
Exception in thread "main" org.springframework.aop.AopInvocationException: Null return val ...
- 更改redhat7 yum源为centos
1. 替换原系统中yum包, 检查初始的yum包有哪些 rpm -qa |grep yum 2. 删除原始的yum包. rpm -qa|grep yum|xargs rpm -e --nodeps 3 ...