CSS3中边框相关的样式

最新推荐文章于 2024-04-25 18:36:27 发布
最新推荐文章于 2024-04-25 18:36:27 发布
阅读量254 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSLUKA/article/details/106586927
版权

border-radius属性(圆角边框）

1.作用
可以进行圆角边框的绘制
2.使用方法

样式备注
border-radius：半径；
border-radius：半径 半径；第一个半径作为边框左上角和边框右下角的圆半径来绘制；第二个半径作为边框右上角和边框左下角的圆半径来绘制
border-top-left-radius：左上角半径–
border-bottom-left-radius：左下角半径
border-top-right-radius：右上角半径
border-bottom-right-radius：右下角半径–

tip： IE9+、Firefox 4+、Chrome、Safari5+以及OPera支持 border-radius属性

3.例子
（1）border-radius：半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div{
            width:300px;
            height:150px;
            background-color: blanchedalmond;
            border:solid 30px brown;
            border-radius:30px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
（2） border-radius：半径 半径；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div{
            width:300px;
            height:150px;
            background-color: blanchedalmond;
            border:solid 30px brown;
            border-radius:30px 90px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
（3）不显示边框时
（在CSS3中，如果使用border-radius属性但是把边框设置为不显示时，浏览器会把背景的四个角绘制成圆角。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div{
            width:300px;
            height:150px;
            background-color: blanchedalmond;
            border-radius:30px 90px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
（4）修改边框种类时
（使用border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div{
            width:300px;
            height:150px;
            background-color: blanchedalmond;
            border:dashed 30px brown;
            border-radius:30px 90px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
（5）绘制4个不同半径的圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div.d1{
              width:150px;
              height:50px;
              background-color: blanchedalmond;
              border-top-left-radius: 60px;
          }
        div.d2{
            width:150px;
            height:50px;
            background-color: burlywood;
            border-bottom-left-radius: 60px ;
        }
        div.d3{
            width:150px;
            height:50px;
            background-color: lightskyblue;
            border-top-right-radius: 60px;
        }
        div.d4{
            width:150px;
            height:50px;
            background-color: cadetblue;
            border-bottom-right-radius: 60px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>

在这里插入图片描述

border-image属性（图像边框）

1.作用
可以让元素的长度或者宽度处于随时变化时，变化状态的边框统一使用一个图像文件来进行绘制。
tip：当我们制定了上边距右边距下边距左边距之后，浏览器就会对整个背景图像进行切割
在这里插入图片描述
在这里插入图片描述
(拉伸时四个角不会变化）

2.使用方法
（1)webkit-border-image：url（"边框图像的路径”）上边距 右边距 下边距 左边距；
（2）-moz-border-image：url（"边框图像的路径 ") 上边距 右边距 下边距 左边距；
（3）-o-border-image：url（"边框图像的路径”）上边距 右边距 下边距 左边距；
（4）border-image：url（"边框图像的路径”）上边距 右边距 下边距 左边距；
（5）border-image：url（"边框图像的路径”）上边距 右边距 下边距 左边距/border宽度；
（可以指定边框宽度。border的宽度也可以对四条边进行分别设置）
tip： 上面参数中，图像的路径、上边距、右边距、下边距、左边距必须进行指定，但是如果上边距、右边距、下边距、左边距的值完全一样，那就可以缩写为一个。
写法：border-image：url（“边框图像的路径”） 边距；
3.例子
（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:100px;
              height:100px;
              -webkit-border-image:url("1.jpg") 100;
              border-width:100px;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:100px;
              height:100px;
              -webkit-border-image:url("1.jpg") 100/25px 50px 75px 100px;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
4.指定四条边的背景的显示方法
**1.方法：**border-image：url（“边框图像的路径”) 上边距 右边距 下边距 左边距/border宽度 topbottom leftright；
（topbottom 表示上下两条边中的图像的显示方法，leftright表示元素的左右两条边中的显示方式，在显示方法中可以指定的值有repeat、stretch和round。
<1>repeat：将图像以平铺的方式进行显示。
<2>stretch：将图像以拉伸的方式进行显示。
<3>round：将图像进行平铺显示，但是如果最后一幅图不能被完全显示时，就不显示图像，把之前的图像扩大。
2.对比
<1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:300px;
              height:300px;
              -webkit-border-image:url("3.jpg") 100/100px;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
<2>repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:300px;
              height:300px;
              -webkit-border-image:url("3.jpg") 100/100px repeat repeat;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
<3>stretch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:300px;
              height:300px;
              -webkit-border-image:url("3.jpg") 100/100px stretch repeat;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
<4>round

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:300px;
              height:300px;
              -webkit-border-image:url("3.jpg") 100/100px round round;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
<5>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:432px;
              height:300px;
              -webkit-border-image:url("3.jpg") 100/100px round round;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述
<6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image属性</title>
    <style>
        div{
              width:432px;
              height:300px;
              -webkit-border-image:url("2.png") 100/100px repeat repeat;
          }
    </style>
</head>
<body>
<h1>border-image属性</h1>
<div></div>
</body>
</html>

在这里插入图片描述

SSLUKA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3中边框的4种样式
xyjikl
07-08 2万+
border是CSS的一个属性，用它可以给能确定范围的HTML标签画边框，它可以定义边框线的类型、宽度和颜色，最终可以制作一些特殊效果 css3的边框有4种样式： 1.border-color（边框的颜色） 一般设置边框都有3个属性-宽度、线的样式、颜色，如果宽度设置了很多PX，那么就可以给边框设置很多颜色，让边框显示出渐变的效果，不过设置边框不同颜色时只能通过borde
CSS边框样式详解
大河之犬的博客
09-29 4148
下面详细介绍一下`border-width、border-style`以及`border-color`属性
CSS border边框（理解网页边框制作）
最新发布
百赢出品，必属精品
04-25 3641
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
CSS 边框样式
xiangxiongfly
05-23 2463
边框样式 border-width 边框宽度 border-style 边框外观 border-color 边框颜色 border 简写 局部样式 border-radius 边框圆角 box-shaow 边框阴影 border-image 边框背景
CSS3边框样式
ddd2501的博客
11-10 222
掌握新的技巧，CSS3总会让你有所收获
css边框border(含代码,易懂)
m0_74577714的博客
09-14 6424
css中边框属性方法
6种非常炫酷的CSS3按钮边框动画特效
09-24
总结来说，CSS3按钮边框动画特效是一种利用CSS3特性实现的交互设计技术，它通过改变边框样式和应用动画效果，使得按钮在鼠标悬停时产生动态变化，从而提升网页的视觉吸引力。开发者可以根据项目需求选择适合的动画...
6种炫酷的CSS3按钮边框动画特效
12-13
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是按钮边框的动画特效。本资源“6种炫酷的CSS3按钮边框动画特效”是一个集合，它包含六种独特且吸引人的按钮动画效果，...
css3 svg文字轮廓边框特效
07-24
本文将深入探讨“CSS3 SVG文字轮廓边框特效”这一主题，包括CSS3和SVG的基本概念、如何利用它们创建文字轮廓边框特效，以及相关文件“jiaoben7837”的可能内容。 ### CSS3简介 CSS3（层叠样式表第三版）是用于描述...
CSS3边框动画
09-13
CSS3中的`border`属性允许我们为元素定义边框的宽度、样式和颜色。通过结合`transition`和`animation`属性，我们可以创造出各种动态的边框效果。`transition`用于平滑地改变一个或多个属性，而`animation`则可以定义...
漂亮的CSS3按钮边框动画特效
06-11
首先，我们需要理解CSS3中的关键帧动画（@keyframes），这是创建边框动画的基础。通过定义动画的不同阶段，我们可以让按钮边框在不同的时间点改变颜色、宽度或位置，从而形成动态效果。例如，可以设置一个名为...
比较好看的css 自定义样式（标题 h1 h2 h3）
11-21
效果图 博客园中常用的样式 /*标题h1 h2 h3样式*/ #content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px; } #content h1 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); c
纯css制作带三角的边框(附效果图)
12-13
首先附上效果图： 以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:<!DOCTYPE HTML><html lang=”en-US”><head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-fa
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
Vec_Kun的博客
01-24 3710
本节我们学习了CSS边框、边距、轮廓的各种知识（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移），强化了CSS边框、边距与轮廓的知识点，今后将继续介绍CSS文本等知识点。
CSS系列之边框border相关API①
老__L的博客
01-24 435
本文主要介绍CSS的border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width...属性。
HTML--CSS--边框、列表、表格样式
weixin_44517278的博客
01-14 2178
属性：border-width 边框宽度border-style 边框外观border-color 边框颜色需要同时设定三个属性。
一、CSS3-边框
Creationyang的博客
11-11 539
1 CSS   CSS（Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观（如网页的样式、布局等等）的声明式语言。浏览器会根据CSS的样式定义将其选定的元素显示为恰当的形式。一条CSS的样式定义包括属性和属性值，他们共同决定网页的外观。   CSS可以用于给文档添加样式——比如改变标题和链接的颜色和大小。它也可用于创建布局——比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边区域的布局。它甚至还可以用来做一些特效，比如动画。   一条CSS规则包含一个选择符
css元素与浏览器边框,CSS3盒子模型（边框&内边框&外边框&水平方向布局&垂直方向布局&外边距折叠&行内元素）&浏览器的默认样式...
weixin_42109178的博客
08-03 673
文章目录1、盒子模型1.1 盒子模型1.2 边框1.3 内边框1.4 外边框1.5 水平方向布局1.6 垂直方向布局 + 1.7 外边距折叠1.8 行内元素2、浏览器的默认样式1、盒子模型1.1 盒子模型.box1{/* 内容区content,元素中的所有子元素和文本内容都在内容区中排列内容区的大小由width和height设置，宽度与高度*/width: 200px;height: 200px;...
CSS给元素添加边框（样式、颜色、宽度）
热门推荐
记录和分享属于我的“IT”时光
01-16 1万+
CSS给元素添加边框（样式、颜色、宽度）
css3border边框渐变
09-06
CSS3 提供了实现边框渐变的方式，主要是通过 `border-image` 和 `border-radius` 属性的结合使用来实现的。 下面是一个实现边框渐变的示例代码： ```css .border-gradient { border: 10px solid transparent; border-image: linear-gradient(to right, #f00, #0f0) 1; border-radius: 10px; } ``` 解释一下上面的代码： 1. 首先设置 `border` 属性，将边框宽度设为 10px，颜色设为透明。这是为了让边框渐变覆盖在原有的边框之上。 2. 设置 `border-image` 属性，使用 `linear-gradient` 函数实现渐变效果，指定渐变方向为水平方向（从左到右），渐变色分别为红色和绿色。最后的 `1` 表示使用整个边框作为图像。 3. 最后设置 `border-radius` 属性，实现圆角效果。 通过以上代码，就可以实现一个具有边框渐变效果的元素。需要注意的是，`border-image` 属性的兼容性较差，建议在实际应用中进行适当的兼容性处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值