扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >css3新增了哪些边框效果
  • 201

0
分享到

css3新增了哪些边框效果

2024-04-02 19:04:59 201人浏览 独家记忆
摘要

这篇文章主要介绍“css3新增了哪些边框效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3新增了哪些边框效果”文章能帮助大家解决问题。

这篇文章主要介绍“css3新增了哪些边框效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3新增了哪些边框效果”文章能帮助大家解决问题。

css3新增的三种边框效果：1、边框图片“border-image”，可为边框添加背景图片；2、边框圆角“border-radius”，可给元素添加一个或多个圆角效果；3、边框阴影“box-shadow”，可将一个或多个阴影添加到元素框上。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3新增了三种边框效果

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3

1、边框图片“border-image”

border-image属可以为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

语法：

css3新增了哪些边框效果

说明：

border-image属性需要定义3个方面的内容。

（1）图片路径。

（2）切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。

（3）平铺方式：有3种取值，分别为repeat、round和stretch。

在本节所有例子中，我们都是使用图所示的这张90px×90px的图片作为边框的背景图片。

css3新增了哪些边框效果

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

css3新增了哪些边框效果

分析：

从预览效果我们可以知道，位于4个角的数字1、3、7、9还是乖乖地位于4个角。然后4条边框的2、4、6、8会不断地平铺。

对于border-image属性，我们总结如下:

（1）在制作边框背景图片时，应该制作4条边，中间部分需要挖空。

（2）边框背景图片每条边的宽度跟对应的边框宽度（即border-width）应该相同。

2、边框圆角“border-radius”

border-radius属性可以给边框添加圆角效果

border-radius 属性定义元素角的半径，通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

语法：

border-radius: none　｜　length{1,4} [/ length{1,4}

其中每一个值可以为 数值或百分比的形式。

length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。

如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。
css3新增了哪些边框效果
如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
css3新增了哪些边框效果
如果是四个值，那么第一个值是设置 top-left， 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left
css3新增了哪些边框效果

除了上述的简写外，还可以和border一样，分别写四个角，如下：

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

分别是水平方向和竖直方向半径，第二值省略的情况下，水平方向和竖直方向的半径相等。
border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 WEBkit 内核需要加上“-webkit”等，但是IE和Opera没有私有格式，因此为了最大程度的兼容浏览器，我们需要设置如下：

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

请将标准形式写在浏览器私有形式之后。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="KeyWords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img src="../images/photo.jpg" width="300px">
</body>
</html>

css3新增了哪些边框效果

3、边框阴影“box-shadow”

在css中，可使用box-shadow属性实现边框阴影效果，box-shadow属性可以设置一个或多个下拉阴影的框。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

可能的值：

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow属性的使用

1、水平垂直偏移为0也可以有阴影

如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。

例子：

  • 第一个div通过设置blur-radius产生阴影效果。

  • 第二个div通过设置spread正值产生阴影效果。

  • 第三个div通过设置spread负值产生阴影效果。

但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。

我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
}
.blur{
        box-shadow: 0 0  20px ;
         
}  
.spread-positive{
        box-shadow: 0 0 20px 5px ;
         
}
.spread-negative{
        box-shadow: 0 0 20px -5px ;
         
}
</style>
<body>
<div class="blur"></div>
<div class="spread-positive"></div>
<div class="spread-negative"></div>
</body>

css3新增了哪些边框效果

2、设置水平垂直偏移得到阴影效果

outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。

inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。

例子:

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
}
.shadow0{box-shadow: 0 0;}  
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}  
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</style>
<body>
    <div class="shadow0"></div>
    <div class="shadow1"></div>
    <div class="shadow10"></div>
    <div class="inset-shadow0"></div>
    <div class="inset-shadow1"></div>
    <div class="inset-shadow10"></div>
</body>

css3新增了哪些边框效果

3、投影方式

投影方式默认是outset，即外部投影，可设置inset让向内投影。

例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    vertical-align: top;
} 
.outset{
    box-shadow: 10px 10px teal;
}
.inset{
    box-shadow: 10px 10px teal inset;    
}
.double{
    box-shadow: 10px 10px teal inset,10px 10px teal;
}
.bg{
    background-color: yellow;
}
</style>
<body>
    <div class="outset"></div>
    <div class="inset"></div>
    <div class="double"></div>
    <div class="inset bg">inset阴影在背景之上，内容之下</div>
</body>

css3新增了哪些边框效果

4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。

<style type="text/css">
 div{
 width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    border-radius: 50px;
 }
.shadow{
    box-shadow: 0 0  10px 10px green;
}
</style>
<body>
<div class="shadow"></div>
</body>

css3新增了哪些边框效果

关于“css3新增了哪些边框效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网VUE频道，小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: css3新增了哪些边框效果

本文链接: https://lsjlt.com/news/97529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3新增了哪些边框效果
    这篇文章主要介绍“css3新增了哪些边框效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3新增了哪些边框效果”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • css3中有哪些新增边框属性
    这篇文章主要为大家展示了“css3中有哪些新增边框属性”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css3中有哪些新增边框属性”这篇文章吧。 ...
    99+
    2024-04-02
  • CSS3新增了哪些属性
    今天小编给大家分享一下CSS3新增了哪些属性的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。...
    99+
    2024-04-02
  • CSS3如何使用新增边框属性制作关门开门效果
    这篇文章主要介绍了CSS3如何使用新增边框属性制作关门开门效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。border: 宽度 类型 颜色...
    99+
    2024-04-02
  • css3中新增了哪些伪类
    这篇文章将为大家详细讲解有关css3中新增了哪些伪类，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css3伪类：“:first-of-type”、“:last-of-type”、“:only-of-typ...
    99+
    2023-06-14
  • CSS3实现圆角边框和边界图片效果
    这篇文章主要讲解了“CSS3实现圆角边框和边界图片效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3实现圆角边框和边界图片效果”吧！本文的学习要点如...
    99+
    2024-04-02
  • css3如实现边框、背景、文本效果
    这篇文章主要介绍css3如实现边框、背景、文本效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、边框box-shadowbox-shadow: h-shadow v-shadow b...
    99+
    2023-06-08
  • css3的边框新增加的特性怎么使用
    本篇内容主要讲解“css3的边框新增加的特性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3的边框新增加的特性怎么使用”吧! ...
    99+
    2024-04-02
  • css3如何实现三角形带边框效果
    这篇文章主要讲解了“css3如何实现三角形带边框效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3如何实现三角形带边框效果”吧！ ...
    99+
    2024-04-02
  • 怎么在CSS3中实现一个边框效果
    怎么在CSS3中实现一个边框效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。什么是CSS#CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或...
    99+
    2023-06-08
  • Css3设置边框属性有哪些
    小编给大家分享一下 Css3设置边框属性有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！   ...
    99+
    2024-04-02
  • CSS3新增的属性有哪些
    这篇文章将为大家详细讲解有关CSS3新增的属性有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS...
    99+
    2024-04-02
  • css3新增的单位有哪些
    本文小编为大家详细介绍“css3新增的单位有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3新增的单位有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 ...
    99+
    2024-04-02
  • css3新增哪些文本属性
    这篇文章主要介绍“css3新增哪些文本属性”，在日常操作中，相信很多人在css3新增哪些文本属性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3新增哪些文本属性”的疑惑...
    99+
    2024-04-02
  • css3中新增属性有哪些
    css3中新增属性有：边框属性。（1）border-color：为边框设置颜色。（2）border-image：使用图片来创建边框。（3）border-radius：圆角边框。（4）box-shadow：用于向方框添加阴影。背景属性。通过b...
    99+
    2024-04-02
  • 如何在CSS3中实现多样的边框效果
    今天就跟大家聊聊有关如何在CSS3中实现多样的边框效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。实现代码：<div>你能看到半透明的边框吗？</div>d...
    99+
    2023-06-08
  • CSS3边框模块知识点有哪些
    这篇文章主要介绍“CSS3边框模块知识点有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3边框模块知识点有哪些”文章能帮助大家解决问题。   ...
    99+
    2024-04-02
  • CSS3边框相关的属性有哪些
    今天小编给大家分享一下CSS3边框相关的属性有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一...
    99+
    2024-04-02
  • 怎么用CSS3+DIV实现小三角形边框效果
    这篇文章主要介绍“怎么用CSS3+DIV实现小三角形边框效果”，在日常操作中，相信很多人在怎么用CSS3+DIV实现小三角形边框效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
  • 如何利用SVG和CSS3实现边框动画效果
    本篇内容主要讲解“如何利用SVG和CSS3实现边框动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何利用SVG和CSS3实现边框动画效果”吧!今天我们来...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作