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>

推荐阅读

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

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

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

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

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

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

蜡笔小新 2023-12-14 14:37:52
js
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
js
Vue案例（搜索页面）

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

蜡笔小新 2023-10-16 06:20:19
char
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
int
PHP二维数组根据某个字段排序的方法

本文介绍了一种在PHP中对二维数组根据某个字段进行排序的方法，以年龄字段为例，按照倒序的方式进行排序，并给出了具体的代码实现。 ... [详细]

蜡笔小新 2023-12-11 10:56:01
int
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47
import
python 终止函数命令_如何使“停止”按钮终止已经在Tkinter（Python）中运行的“启动”函数...

我用Tkinter制作了一个图形用户界面，有两个主按钮：“开始”和“停止”。请您就如何使用“停止”按钮终止“开始”按钮为以下代码调用的已运行功能提供建议 ... [详细]

蜡笔小新 2023-10-17 20:02:38
char
css如何设置span的宽度

这篇文章给大家分享的是有关css如何设置span的宽度的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css设置span宽度 ... [详细]

蜡笔小新 2023-10-17 16:40:27
function
css 回到顶部按钮

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

蜡笔小新 2023-10-17 13:38:49
js
【Vue基础】监听属性watch

Vue监听属性是watch，我们可以通过watch来响应数据的变化。代码示例： ... [详细]

蜡笔小新 2023-10-16 19:33:09
import
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13
char
css适应样式,简述css样式的功能

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

蜡笔小新 2023-10-13 13:39:50
char
使用浏览器的主滚动条滚动特定的DIV内容

使用浏览器的主滚动条 ... [详细]

蜡笔小新 2023-10-13 11:36:06

一粒小小无名砂_741

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

Tags | 热门标签

RankList | 热门文章

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

边框圆角 展示示例

边框圆角展示示例