图片边框变圆圈html,css如何设置边框的圆角样式?border-radius属性设置圆角样式(图 文)...
很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像、圆角的
按钮等等。那么这些圆角效果是如何用css样式实现的,本章就给大家介绍css如何设置边框的圆角样式?border-radius属性设置边框的样式(图
文)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在css样式中有一个属性:border-radius属性是就常见
,也是最简单、快速设置圆角效果的属性;border-radius(含义是"边框半径"),只需要给border-radius
提供值,就能设置边框圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等都可以。
border-radius包含5种设置圆角样式方式:
border-radius :同时设置4个边框的圆角样式。
border-top-left-radius :设置左上角边框的圆角样式。
border-top-right-radius :设置右上角边框的圆角样式。
border-bottom-left-radius :设置左下角边框的圆角样式。
border-bottom-right-radius :设置右下角边框的圆角样式。
图片示例(设置四个边框圆角值为20px):
border-radius的参数说明:
border-radius可以一次性对四个角设置相同的值,也可以对4个角分别设置圆角样式。而秘诀就在于设定border-radius的参数个数,border-radius的参数个数范围为1~4个。
下面分别说明参数1~4个所代表的含义:
1. 当参数个数为:1
说明:4个边框的圆角样式都采用这个设置。
例:border-radius:20px;/*4个边框圆角样式都为20px*/
2.当参数个数为:2
说明:
第1参数:左上角和右下角边框的圆角样式。
第2参数:右上角和左下角边框的圆角样式。
例:border-radius:20px 10px;/*左上角和右下角:20px;右上角和左下角:10px*/
3. 当参数个数为:3
说明:
第1参数:左上角边框的圆角样式。
第2参数:右上角和左下角边框的圆角样式。
第3参数:右下角边框的圆角样式。
例:border-radius:20px 10px 40px;/*左上角:20px;右上角和左下角:10px;右下角:40px*/
4.当参数个数为:4
说明:
第1参数:左上角边框的圆角样式。
第2参数:右上角边框的圆角样式。
第3参数:右下角边框的圆角样式。
第4参数:左下角边框的圆角样式。
例:border-radius:20px 10px 50px 30px;/*左上角:20px;右上角:10px;右下角:50px;左下角:30px*/
当然上图的样式也可以用圆角的单独样式来设置:border-top-left-radius :20px。
border-top-right-radius :10px。
border-bottom-left-radius :30px。
border-bottom-right-radius :50px。
只是这样设置太过于繁琐,不利于优化了css文件代码。
圆形边框(实例介绍)
.demo{
width: 100px;
height: 100px;
border: 1px solid salmon;
background-color: salmon;
border-radius: 100%;
}
只要把border-radius里的值设置为100%,就可以得到这样的一个圆形边框。圆形边框可以用在用户的头像展示等等方法。
效果图:
总结:
border-radius属性是一个简单又方便且实用的设置边框圆角样式的方法,在前端页面开发的很多地方得到应用;具体的使用方法,要看实际的需要。
图片边框变圆圈html,css如何设置边框的圆角样式?border-radius属性设置圆角样式(图 文)...相关推荐
- html 右边框变短,HTML / CSS:使边框右侧高度动态化
3 个答案: 答案 0 :(得分:0) #ColumnOne, #ColumnTwo, #ColumnThree, #ColumnFour { border-r ...
- 【响应式Web前端设计】css如何设置边框的圆角样式?border-radius属性设置圆角样式(图 文)
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
- html图片颜色变深,利用CSS改变图片颜色的100种方法!
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
- html边框闪烁代码,纯css实现动态边框的示例代码
背景 这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框 思路 看到这个效果,我首先想到的是设置元素的border属性,可惜border ...
- html中div动态边框,[实践总结]纯css实现动态边框
这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框 思路 看到这个效果,我首先想到的是设置元素的border属性,可惜border不能设 ...
- html边框旋转,html – 使用CSS仅旋转边框[复制]
旋转父级也会旋转子项,所以最好像这里一样单独设置边框样式 .circle { width: 100px; height: 100px; position: relative; } .circle .b ...
- html设置文本域的,HTML-文本域属性设置
1.设置文本域的字体 输入内容 2.设置文本域的背景色 输入内容 3.文本域的虚线边框设置 输入内容 4.文本域的实线边框设置 输入内容 5.文本域的点线边框设置 输入内容 6. 设置文本域的背景图 ...
- WEB代码:CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式
1.字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{font-family: 微 ...
- html多重边框,中间空白,CSS实现多重边框
实现这样的效果 简单 Paste_Image.png .box { width: 150px; display: flex; justify-content: center; align-items: ...
- CSS笔记(字体样式,文本属性和颜色样式)
1 字体样式 1.1 字体系列(font family) 在CSS中,字体划分为 五组"字体系列",分别为: sans-serif字体系列:没有衬线的字体,最常用不为过,如 Ari ...
最新文章
- python的pptx文档_通过python-pptx模块操作ppt文件
- Spring Boot的事务管理注解@EnableTransactionManagement的使用
- 中国电信线CTF线下选拨writeup
- 公开征集 | 每个人都可以成为 COSCon'21 主论坛的开源明星
- tooctalstring_Java Long类toOctalString()方法的示例
- tomcat的localhost_access_log日志文件
- Java中的双冒号::是什么玩意?有这个语法?
- Arcgis 地理配准步骤(底图校正)
- 2D物理引擎--谁碰了我的奶酪
- Acwing 360. Freda的传呼机(仙人掌图重构,lca)
- Adobe BrowserLab开放注册并发布升级
- 怎么制作地图分布图,如何在地图上画出区域
- 【学习日志】2022.10.16 万用头文件 sstream C++进制转换
- ZYNQ Linux 添加I2C-RTC驱动
- 微信公众平台如何给粉丝分组打标签?
- 如何监控Redis性能指标
- java恒大集团面试经验,教你如何通过万科恒大面试 顺利拿到一流房企offer
- mysql 分库分表策略_【数据库】分库分表策略
- 计算机关机整人,怎么发个软件让他人电脑自动关机?顺便帮帮讲解 谢谢 整人的 ......
- CC2640之OAD固件升级(外置Flash)
热门文章
- 帮你写出更好的python代码:python函数应用进阶(一)——函数是对象
- DailyFi - 9.2 |Loot,黑纸白字?
- 解决Jenkins集成SonarQube Scanner出现“Tasks support was removed in SonarQube 7.6.”的问题
- 此生未完成 --- 于娟
- 迪文屏中关于MODBUS的接口配置
- c 语言 农历,C++算法系列之中国农历的算法
- 【附源码】计算机毕业设计SSM七七美食汇
- 【编程之美】读书笔记:寻找最大的K个数
- 当年的毒王熊猫烧香,现在怎么样了?
- SQL 配置管理器找不到了