边框-圆角

最新推荐文章于 2023-01-28 20:58:03 发布
最新推荐文章于 2023-01-28 20:58:03 发布
阅读量102 收藏
点赞数
原文链接：http://www.cnblogs.com/wyq-web/p/9463967.html
版权

<!DOCTYPE html>
<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{
height: 90px;
width:160px;
background-color:red;
border-radius: 6px;
position: relative;
}
.item:nth-child(22) .border-radius::after{
content: '';
width: 0px;
height: 0px;
border: 10px solid green;
border-color: transparent;
border-right-color: green;
position: absolute;
top: 25px;
left: -20px;
}
/* 奇怪的图形 */
.item:nth-child(23) .border-radius{
height: 40px;
width:50px;
border-width: 40px 0 40px 70px;
border-color: red;
border-style: solid;
border-radius: 0 0 60px 0;
position: relative;
}
/* QQ对话框 */
.item:nth-child(24) .border-radius{
height: 90px;
width:160px;
background-color:red;
border-radius: 6px;
position: relative;
}
.item:nth-child(24) .border-radius::after{
content: '';
position: absolute;
width: 30px;
height: 30px;
border-width: 0 0 13px 0;
border-style: solid;
border-color: red;
background-color: transparent;
border-radius: 0 0 30px 0;
left: 160px;
}

</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="消息框">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="QQ消息框">
<div class="border-radius"></div>
</div>
</div>
</div>
</body>
</html>

 

 

 

 

转载于:https://www.cnblogs.com/wyq-web/p/9463967.html

anqila1855
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
radius demo
12-04
tinyRadius封装，官方源码和的test测试代码
border-radius 详细用法解析（demo示例）绝大部分图形都有
ITzhongzi的博客
01-17 1221
.demo1 {   /*绘制圆形*/             width: 300px;             height: 300px;             border: 2px solid blue;             margin: 50px auto;             border-radius: 50%;             text-align
css3中Border-radius实例讲解与学习
fengxinyixiao的专栏
11-08 1105
css3中Border-radius实例讲解与学习 时间：2011-02-20　来源：前端设计　作者：webskys　我要评论 css3来了，这里有一项新的技术，圆角的效果让我们从此不再忧愁（别急!css3还未正式发布），现在就让我们先睹为快，了解下css3中这一强大的技术：border-radius吧 从我开始学做网页的时候起，页面上用到的圆角都是头痛的事情，最初是用表格，三行三死，然
TinyRadius官方源码与demo
01-23
TinyRadius官方源码与demo
radius服务器
01-11
一款简易的radius服务器，免安装，添加用户直接就可以用
editText四周边框-圆角
04-16
android中设置EditText有四周边框，圆角边框。将此文件放到res/drawable/edittext.xml，在布局文件中给EditText添加属性android:background="@drawable/edittext"。效果完美实现。当然，里面的圆角，颜色可根据自己...
C#winform textbox 画边框和圆角
01-26
为Winform中的Textbox添加圆角和边框,圆角大小和边框大小可以设置
css 圆角边框
09-25
圆角框大概是CSS3中备受期待的一个属性，也有很多浏览器开始支持它了。但大规模的应用它还需要不少的时间。在目前，广泛使用的方法还是应用图像了。
border-radius以外的CSS圆角边框制作方法
09-24
用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
自定义标签实现圆角边框
10-30
### 自定义标签实现圆角边框 在网页设计与开发领域中，圆角边框是一种常见的视觉效果，它能够使页面元素看起来更加柔和且易于接受。传统的做法是通过使用图片来实现圆角效果，但这种方法不仅增加了页面加载的时间，...
radius 资料
03-19
NULL 博文链接：https://areshowl.iteye.com/blog/708231
radius的TinyRadius实现
03-07
Radius协议现在被用于认证与计费的标准协议,TinyRadius是java的一个小实现，总起来说比较简单，但是国外的资料还很少，自己写的小总结，希望对大家有帮助
php绘制实心菱形,每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆
weixin_30431043的博客
03-18 144
用css画菱形代码:.div1{width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #bbbbbb;}.div2{width: 0;height:...
radius基础以及c/c++ lib
songtzu的专栏
01-27 3284
(本文不是介绍radius协议的理论的)在开始这篇博客之前，看看wiki关于radius的介绍。 客户端-服务器结构 RADIUS协议是一种基于主从式架构的协议。RADIUS 协议中的客户端是对用户（人或者计算机）提供网络连接服务的器材，对服务器提出验证和计费要求。服务器针对客户端的通过进行验证和计费给予应答。服务器只有针对客户端的请求进行应答，而无法反方向地对用户进行服务停止等的请求
border-radius（使用详解）
wwwjjjjj666的博客
01-28 6127
讲述了border-radius的使用
如何使用纯 CSS（border-radius 和 clip）属性画出半圆
青颜的天空的博客
09-13 4203
1、使用border-radius画半圆 把div高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; }
Vue中的绑定样式
weixin_56035334的博客
05-19 361
绑定样式： 1.class样式 写法：class="xxx" xxx可以是字符串、对象、数组 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 2.style样式 :s...
边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）
热门推荐
下雨打伞干嘛的博客
11-10 1万+
边框样式（border-style）: border-style属性可以控制边框的视觉样式，包含8种可用边框样式。 使用方法： p { border-style: groove; } 8种样式： solid： 实线边框，经典边框。 double： 双线边框，含有两条线。 groove： 槽线边框，看起来就像页面中的一个槽。 outset： 外凸边框，看起来就像从页面凸出来一样。 dotted： 虚线（点线）边框。 dashed： 破折线边框。 inset： 内凹边框，看起来像页面凹进去一样。 ridge
html如何是边框四个角变源,边框四个角样式属性border-radius设置汇总_CSS_网站
weixin_35018103的博客
06-29 2363
边框四个角样式属性设置汇总_CSS_网站美工：元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。可分别对上边框、下边框、左边框、右边框的边框宽度、边框的样式、边框颜色进行设置，还可对边框的四个角的样式进行设置，也可使用图像作为边框，可为边框添加一个或多个阴影。1.border-radius 属性是一个简写属性，用于设置边框四个角样式属性。IE9+、Firefox 4+、Chrom...
el-dialog 圆角边框
最新发布
08-19
要给 el-dialog 添加圆角边框，你可以使用 CSS 来实现。可以在 el-dialog 的外层包裹一个容器，并为该容器添加样式来设置圆角边框。以下是一个示例： ```html <div class="dialog-container"> <el-dialog> <!--...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值