CSS3详解:border-radius
讲到css3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。
CSS3 border-radius是什么?
border-radius的含义是:圆角。
CSS3 border-radius的书写格式:
border-radius:apx,比较常见,其中a表示数值,下同;
-webkit-border-top-left-radius:apx,类似这种的写法还是很实用的,但一定要记住顺序,一句话:先写Y轴,再写X轴。
注意:上诉的-webkit-是兼容webkit内核的写法,-moz-内核的写法有所不同,如:-moz-border-radius-topleft:apx
下面我们通过几个实例演示说明border-radius的用法:
CSS3 border-radius 圆角矩形:
.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
CSS3 border-radius 圆角矩形2:
.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}
CSS3 border-radius 圆:
.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}
CSS3 border-radius 漂亮圆角:
.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}
CSS3 border-radius 椭圆:
.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}
能做的事情很多,更多技巧靠你发掘啦!
CSS3详解:border-radius相关推荐
- 放大 旋转 css3,CSS3详解:transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3详解:text-shadow
在CSS3详解的上一篇中我们讲到了 . CSS3 text-shadow是什么? text-shadow的含义是:文本的阴影,给文本添加阴影效果 CSS3 text-shadow书写格式: text- ...
- css3transform rotate,CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS3详解:transform、transition
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- 鼠标经过下划线 css3,详解css3和伪元素实现鼠标移入时下划线向两边展开
本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧.希望 ...
- 妙味课堂html css,CSS3详解(妙味课堂)
2017-09-01 1. 属性选择器 属性选择器的链接: E[attr]: div[title]{background:blue;}: E[attr="value"]:div[t ...
- html框架集frame是啥意思,HTML框架frame与iframe详解
HTML框架 框架简介 经过使用框架,你能够在同一个浏览器窗口中显示不止一个页面.每份HTML文档称为一个框架,而且每一个框架都独立于其余的框架. 使用框架的坏处:html 开发人员必须同时跟踪更多的 ...
- html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
最新文章
- 快速单目三维人手和身体的运动捕捉回归与整合
- python当型循环_对python while循环和双重循环的实例详解
- python学习笔记(七)——类基础
- 2021中超1 1010 zoto
- Androidpn 消息推送总结
- cuda第一次计算耗时_CUDA优化的冷知识10 | GPU卡和Jetson上显存优化的特色
- 用程序猿思维、程序设计师思维两种方式写求斐波那契数列的方法。
- linux c之使用pthread_create创建线程pthread_join等待线程和pthread_exit终止线程总结
- Java 支付宝支付,退款,单笔转账到支付宝账户(单笔转账到支付宝账户)
- 生活中常见物联网实例_物联网网关常见问题解答(一)
- c++ 编写函数返回两个值最小值_结合实例来分析SQL的窗口函数
- TDD 测试驱动开发
- 为什么国内动漫制作多为3D动漫?3DMAX制作次时代建模主要是因为?
- excel数据处理一:巧妙使用openpyxl提取、筛选数据
- 自己用GO语言编写的AliDDNS动态域名更新服务,routeros
- VS2013配置OpenCV3.4.0
- Android:LiveData postValue导致数据丢失问题,及其原因
- 月报总结|Moonbeam 11月份大事一览
- 平面设计常用计算机工具,终于明白平面设计常用硬件设备
- 【Python从0到1】第三篇:基础语法(三)