CSS3边框圆角展示示例（附代码）

作者：一粒小小无名砂_741 | 来源：互联网 | 2023-09-16 19:57

边框圆角展示示例CSS3边框body,ul,li,

边框圆角展示示例

《CSS3 边框圆角展示示例（附代码）》

<html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 边框title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0; } body { background-color: #F7F7F7; } .wrapper { width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box; } header { padding: 20px 0; margin-bottom: 20px; text-align: center; } header h3 { line-height: 1; font-weight: normal; font-size: 28px; } .main { /*overflow: hidden;*/ } .main:after { content: ''; clear: both; display: block; } .main .item { width: 210px; height: 210px; margin: 0 30px 30px 0; display: flex; position: relative; background-color: #FFF; float: left; box-shadow: 2px 2px 5px #CCC; } .main .item:after { content: attr(data-brief); display: block; width: 100%; height: 100%; text-align: center; line-height: 210px; position: absolute; top: 0; left: 0; color: #FFF; font-family: '微软雅黑'; font-size: 18px; background-color: rgba(170, 170, 170, 0); z-index: -1; transition: all 0.3s ease-in; } .main .item:hover:after { background-color: rgba(170, 170, 170, 0.6); z-index: 100; } .main .item:nth-child(4n) { margin-right: 0; } /*.main .item:nth-last-child(-n+5) { margin-bottom: 0; }*/ /* 以上是骨架样式 */ /* 1、2、3、4 顺时针 */ .border-radius { width: 180px; height: 180px; margin: auto; border: 1px solid red; /*border-radius: 50% 30% 20%;*/ } .square { border-radius: 0; } /*拱形*/ .item:nth-child(1) .border-radius { border-radius: 90px; } /*拱形*/ .item:nth-child(2) .border-radius { border-radius: 90px 90px 0 0; } /*半圆*/ .item:nth-child(3) .border-radius { height: 90px; border-radius: 90px 90px 0 0; } /*左上角*/ .item:nth-child(4) .border-radius { /*height: 90px;*/ border-radius: 90px 0 0 0; } /*四分之一圆*/ .item:nth-child(5) .border-radius { width: 90px; height: 90px; border-radius: 90px 0 0 0; } /*横着的椭圆*/ .item:nth-child(6) .border-radius { height: 90px; /*border-radius: 50%;*/ border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px; /*border-radius: 45px / 90px;*/ } /*竖着的椭圆*/ .item:nth-child(7) .border-radius { width: 90px; border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px; } /*半个横着的椭圆*/ .item:nth-child(8) .border-radius { height: 45px; border-radius: 90px 90px 0 0 / 45px 45px 0 0; } /*半个竖着的椭圆*/ .item:nth-child(9) .border-radius { width: 45px; border-radius: 45px 0 0 45px / 90px 0 0 90px; } /*四分之一竖着的椭圆*/ .item:nth-child(10) .border-radius { width: 45px; height: 90px; border-radius: 45px 0 0 0 / 90px 0 0 0; } /*饼环*/ .item:nth-child(11) .border-radius { width: 40px; height: 40px; border: 70px solid red; border-radius: 90px; } /*圆饼*/ .item:nth-child(12) .border-radius { width: 40px; height: 40px; border: 70px solid red; border-radius: 60px; } /*左上角圆饼*/ .item:nth-child(13) .border-radius { width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 0 0; } /*对角圆饼*/ .item:nth-child(14) .border-radius { width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 90px 0; } /*四边不同色*/ .item:nth-child(15) .border-radius { width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; } /*右透明色*/ .item:nth-child(16) .border-radius { width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; border-right-color: transparent; } /*圆右透明色*/ .item:nth-child(17) .border-radius { width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red; border-right-color: transparent; border-radius: 90px; } /*圆右红透明色*/ .item:nth-child(18) .border-radius { width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: transparent; border-right-color: red; border-radius: 90px; } /*阴阳图前世*/ .item:nth-child(19) .border-radius { width: 180px; height: 0px; border-top-width: 90px; border-bottom-width: 90px; border-style: solid; border-top-color: red; border-bottom-color: green; /*border-right-color: red;*/ border-radius: 90px; } /*阴阳图前世2*/ .item:nth-child(20) .border-radius { width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; /*border-right-color: red;*/ border-radius: 90px; } /*阴阳图今生*/ .item:nth-child(21) .border-radius { width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; border-radius: 90px; position: relative; } .item:nth-child(21) .border-radius::after, .item:nth-child(21) .border-radius::before { content: ''; position: absolute; top: 50%; width: 20px; height: 20px; /*margin: -10px 0 0 0;*/ border-width: 35px; border-style: solid; border-radius: 45px; } /*左阴阳*/ .item:nth-child(21) .border-radius::after { background-color: red; border-color: green; } /*右阴阳*/ .item:nth-child(21) .border-radius::before { background-color: green; border-color: red; right: 0; } /*右阴阳*/ .item:nth-child(22) .border-radius { width: 180px; height: 90px; border-bottom-width: 90px; border-bottom-color: green; border-bottom-style: solid; background-color: red; border-radius: 90px; position: relative; } .item:nth-child(22) .border-radius::after, .item:nth-child(22) .border-radius::before { content: ''; position: absolute; top: 50%; width: 20px; height: 20px; border-width: 35px; border-style: solid; border-radius: 45px; } .item:nth-child(22) .border-radius::before { border-color: green; background-color: red; } .item:nth-child(22) .border-radius::after { right: 0; border-color: red; background-color: green; } /*消息框*/ .item:nth-child(23) .border-radius { width: 160px; height: 80px; background-color: red; border-radius: 6px; position: relative; } .item:nth-child(23) .border-radius::after { content: ''; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent; border-right-color: red; position: absolute; top: 16px; left: -20px; } /*奇怪的图形*/ .item:nth-child(24) .border-radius { width: 40px; height: 40px; border-width: 45px 0 45px 70px; border-style: solid; border-radius: 0 0 60px 0; border-color: red; } /*奇怪的图形2*/ .item:nth-child(25) .border-radius { width: 100px; height: 40px; border-width: 45px 20px 45px 70px; border-style: solid; border-radius: 60px; border-color: red; } /*QQ对话*/ .item:nth-child(26) .border-radius { width: 160px; height: 80px; background-color: red; border-radius: 6px; position: relative; } .item:nth-child(26) .border-radius::after { content: ''; position: absolute; top: 0; right: -20px; width: 30px; height: 30px; border-width: 0 0 30px 30px; border-style: solid; border-bottom-color: red; border-left-color: transparent; border-radius: 0 0 60px 0; } /*圆角的百分比设置 */ .item:nth-child(27) .border-radius { width: 180px; /*height: 180px;*/ height: 90px; border-radius: 50%; border-radius: 90px/45px; /*百分比是按横竖两个对应的方向的长度进行计算*/ } style> head> <body> <div class="wrapper"> <header> <h3>CSS3 边框圆角h3> header> <div class="main"> <div class="item" data-brief="整圆"> <div class="border-radius">div> div> <div class="item" data-brief="拱形"> <div class="border-radius">div> div> <div class="item" data-brief="半圆"> <div class="border-radius">div> div> <div class="item" data-brief="左上角"> <div class="border-radius">div> div> <div class="item" data-brief="四分之一圆"> <div class="border-radius">div> div> <div class="item" data-brief="横着的椭圆"> <div class="border-radius">div> div> <div class="item" data-brief="竖着的椭圆"> <div class="border-radius">div> div> <div class="item" data-brief="半个横着的椭圆"> <div class="border-radius">div> div> <div class="item" data-brief="半个竖着的椭圆"> <div class="border-radius">div> div> <div class="item" data-brief="四分之一竖着的椭圆"> <div class="border-radius">div> div> <div class="item" data-brief="饼环"> <div class="border-radius">div> div> <div class="item" data-brief="圆饼"> <div class="border-radius">div> div> <div class="item" data-brief="左上角圆饼"> <div class="border-radius">div> div> <div class="item" data-brief="对角圆饼"> <div class="border-radius">div> div> <div class="item" data-brief="四边不同色"> <div class="border-radius">div> div> <div class="item" data-brief="右透明色"> <div class="border-radius">div> div> <div class="item" data-brief="圆右透明色"> <div class="border-radius">div> div> <div class="item" data-brief="圆右红透明色"> <div class="border-radius">div> div> <div class="item" data-brief="阴阳图前世"> <div class="border-radius">div> div> <div class="item" data-brief="阴阳图前世2"> <div class="border-radius">div> div> <div class="item" data-brief="阴阳图今生"> <div class="border-radius">div> div> <div class="item" data-brief="阴阳图今生2"> <div class="border-radius">div> div> <div class="item" data-brief="消息框"> <div class="border-radius">div> div> <div class="item" data-brief="奇怪的图形"> <div class="border-radius">div> div> <div class="item" data-brief="奇怪的图形2"> <div class="border-radius">div> div> <div class="item" data-brief="QQ对话"> <div class="border-radius">div> div> <div class="item" data-brief="圆角百分比"> <div class="border-radius">div> div> div> div> body> html>

推荐阅读

io
使用HTML创建弹出框以便用户输入信息

在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]

蜡笔小新 2023-10-14 08:49:35
io
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
web
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
css适应样式,简述css样式的功能

css自适应字体样式？如果是一排文字，一个background‘red’;就搞定了。是多行的话，只有根据文字行高，用一张背景图横向重复。css样式自适应分辨率高度和宽度尽量使用百分 ... [详细]

蜡笔小新 2023-10-13 13:39:50
io
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
数组
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
web
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
text
解决IE678伪类不兼容问题的方法

本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]

蜡笔小新 2023-12-13 10:50:43
io
移动端常用单位——rem的使用方法和注意事项

本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。 ... [详细]

蜡笔小新 2023-12-12 07:20:50
function
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
function
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49
io
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19
io
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]

蜡笔小新 2023-12-12 17:52:50
数组
SpringMVC接收请求参数的方式总结

本文总结了在SpringMVC开发中处理控制器参数的各种方式，包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver，处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor，以及PathVariableMapMethodArgumentResol等子类。 ... [详细]

蜡笔小新 2023-12-11 19:55:40
main
从Oracle安全移植到国产达梦数据库的DBA实践与攻略

随着我国对信息安全和自主可控技术的重视，国产数据库在党政机关、军队和大型央企等行业中得到了快速应用。本文介绍了如何降低从Oracle到国产达梦数据库的技术门槛，保障用户现有业务系统投资。具体包括分析待移植系统、确定移植对象、数据迁移、PL/SQL移植、校验移植结果以及应用系统的测试和优化等步骤。同时提供了移植攻略，包括待移植系统分析和准备移植环境的方法。通过本文的实践与攻略，DBA可以更好地完成Oracle安全移植到国产达梦数据库的工作。 ... [详细]

蜡笔小新 2023-12-11 13:58:08

一粒小小无名砂_741

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

CSS3边框圆角展示示例（附代码）

边框圆角 展示示例

边框圆角展示示例