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 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...
随机推荐
- tiny6410 uboot启动参数的问题
使用uboot来启动tiny6410,需要在启动参数中加入lcd=S70,才能在lcd上显示正确的画面
- map的实际操作用并for_each遍历
#include<iostream> #include<map> #include<algorithm> #include<string> using ...
- Redis学习-hash数据类型
hash 类型是string类型的field和value的映射表,或者说是一个string集合,适合存储对象,相比较而言,将一个对象类型存储在hash类型里要比存储在string类型里占用更少的内存空 ...
- Linux 进程级开启最大文件描述符 调优
开启最大文件数 系统可以开启的最大文件描述符(可同时开启最多的文件数),最大开启65535,可根据需求进行调优. 查看系统当前可开启最大文件描述符数 ulimit -n [root@localhost ...
- Linux 跟踪连接netfilter 调优
Netfilter介绍 linux内核中的netfilter是一款强大的基于状态的防火墙,具有连接跟踪(conntrack)的实现.conntrack是netfilter的核心,许多增强的功能,例如, ...
- Linux 系统最大TCP连接数 调优
Linux系统TCP最大连接数 Linux系统可接连接到最大的TCP连接数,高并发情况下可进行扩展加大,最大为65536. 限制最大TCP连接数 修改文件:/etc/sysctl.conf 生效命令: ...
- git 分支命名规范
为规范开发,保持代码提交记录以及 git 分支结构清晰,方便后续维护,现规范 git 的相关操作. 主要规范两点: git 分支命名规范 git 提交记录规范 1. git 分支命名规范 git 分支 ...
- PHP遍历目录和文件及子目录和文件
正常直接使用opendir方法,就可以读到所有的目录和文件 文件可以直接记录下来,目录则需要再进一步获取里边的文件信息 也就是,如果当前读出来是目录,则需要再次调用函数本身(递归),直到没有目录 循环 ...
- Always clear download 下载 谷歌浏览器插件
由于该博文不支持上传压缩包,因此,如有需要always clear download插件的可点击此链接在百度网盘上下载https://pan.baidu.com/s/13wWchis3iKqXkIA5 ...
- 一道简单树形dp
题意:给定一棵树,从中选出一些节点,使得不成父子关系的节点对数最多.问这个最大值是多少. 思路:首先既然是给定一颗树,先要选择合适的数据结构,来保存这颗树.由于这颗树只关心根节点在哪里,所以只需要用一 ...