长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。
css实现圆角矩形、半圆、圆形效果的优点:
* 减少维护的工作量,不再需要使用图片。
* 提高网页性能,网页的载入速度将变快。
* 增加视觉可靠性。某些情况下,背景图片会下载失败,CSS3就不会发生这种情况。
border-radius属性
CSS3圆角只需设置一个属性:border-radius(含义是”边框半径”)。
为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
比如,下面是一个div方框:
现在设置它的圆角半径为15px:
border-radius: 15px;
这条语句同时将每个圆角的”水平半径”(horizontal radius)和”垂直半径”(vertical radius)都设置为15px。
border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。
如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。
如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。
如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
border-radius: 15px 5px;
border-radius: 15px 5px 25px;
border-radius: 15px 5px 25px 0px;
(左下角的半径为0,就变成直角了。)
单个圆角的设置
除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。
如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。
border-top-left-radius: 15px;
border-top-left-radius: 15px 5px;
注意:
CSS3实现圆角需要使用border-radius属性,但因为浏览器兼容性的问题,在开发过程中要加私有前缀。
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius
border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。
1、制作半圆的方法:
元素的高度是宽度的一半,左上角和右上角的半径元素的高度一致(大于高度也是可以的,至少为height值)。
.semi-circle{
width:100px;
height:50px;//高度是宽度的一半
background-color:#000;
border-radius:50px 50px 0 0;//左上和右上至少为height值
}
效果:
知道了如何画上半圆,就会举一反三画其他方向的圆了,看完教程要马上试一试哦,学习
2、画实心圆的方法:
原理:设置DIV宽度和高度一致(正方形),然后四个角设置为高度或者宽度的1/2.
.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px;
}
效果:
本文来自投稿,不代表中国网页设计立场,如若转载,请注明出处:http://www.125jz.com/1060.html
长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解相关推荐
- css制作圆角矩形,CSS绘制圆角矩形图形的效果
我们在给矩形的四角进行圆角处理时,我们早期,都是采用片图来完成,这无疑是给网页的加载增加了负担,大量的图片载入在网页里,流量消耗,对手机用户是一刺痛的.给网页及APP的加载速度,无疑是我们一直研究的方 ...
- html中正方形圆角框,CSS高级技巧:圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明 ...
- Android圆形imageview布局,Android实现圆角矩形和圆形ImageView的方式
Android中实现圆角矩形和圆形有很多种方式,其中最常见的方法有ImageLoader设置Option和自定义View. 1.ImageLoader加载图片 public static Displa ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- html中overflow是什么标签,CSS中Overflow的属性是什么?Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
- MYSQL圆角矩形表示_android 利用Bitmap获取圆角矩形、圆形图片
1.在很多时候,我们要显示图片资源,需要将他的资源显示为圆角的:示例源码如下: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,fl ...
- Glide加载常用类型图片(带白色边框的圆形图、圆角矩形图片、圆形图片)
一:依赖包: Glide_github implementation 'com.github.bumptech.glide:glide:4.8.0' annotationProcessor 'com. ...
- iOS 图片设置为圆角矩形,圆形等
有的时候需要将图片现实为圆形 比如头像等 以下面的图片为例 我们按照正常的方式添加后效果如下 UIImageView *userIconImageV=[[UIImageView alloc]initW ...
- Android标准Glide加载圆形图和圆角矩形图
引入: implementation 'com.github.bumptech.glide:glide:4.9.0'annotationProcessor 'com.github.bumptech.g ...
最新文章
- [转]VC++下使用ADO操作数据库
- jmeter时间格式化
- [html] 说说你对target=“_blank“的理解?有啥安全性问题?如何防范?
- CentOS 5.8 Zimbra邮件系统安装与配置
- 计算机组成原理组合逻辑控制器实验报告,计算机组成原理实验报告—认识性实验 华北电力大学.doc...
- 【渝粤教育】国家开放大学2019年春季 2633轨道交通信号与通信系统 参考试题
- 系统分析师知识点汇总
- win10如何还原计算机名,win10电脑一键还原教程
- GO分析和KEGG分析都是啥?
- AOSP 源代码标记和 build
- Prometheus+Grafana监控安装及配置JVM实现企业微信告警
- Elasticsearch:如何使用 Elasticsearch 和 Python 构建面部识别系统
- 星起航:抖音小店如何提高店铺评分?
- VTS manifest xml
- 【巴什博弈】HDOJ2188悼念512汶川大地震遇难同胞——选拔志愿者
- 敏捷是只有一个系统,从楚王爱细腰说起
- JVM学习总结笔记2
- 当python小白遇到QQ钓鱼网站
- python Math.atan2() degrees()
- JAVAEE考试简答题整理