css 边框

cgh1999520 发布于2019-08-30 15:52 / 3298人阅读

摘要：创建出的假边框出现在元素的外圈，并不会响应鼠标事件比如悬停或点击。给属性加上关键字来使投影绘制在元素的内圈。图请注意此时你需要增加额外的内边距来腾出足够的空隙。

css 边框 半透明边框

border: 10px solid hsla(0,0%,100%,.5); 
background: white;
background-clip: padding-box;

多重边框

box-shadow

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

h-shadow 水平偏移负值表示阴影在左侧

v-shadow 垂直偏移负值表示阴影在上方

blur 模糊距离

spread 扩张半径

color 颜色

inset 外部阴影改为内部阴影

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值

支持逗号分隔语法,可以创建任意数量的投影

注意：box-shadow 是层层叠加的,第一层投影位于最顶层,依次类推

投影的行为跟边框不完全一致,因为它不会影响布局,而且也不会受到 box-sizing 属性的影响，可以通过内边距或外边距(这取决于投影是内嵌和还是外扩的)来额外模拟出边框所需要占据的空间。

创建出的假“边框”出现在元素的外圈，并不会响应鼠标事件,比如悬停或点击。给 box-shadow属性加上inset关键字,来使投影绘制在元素的内圈。图2-6 请注意,此时你需要增加额外的内边距来腾出足够的空隙。

background: yellowgreen; 
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

outline

问题：只需要两层边框

先设置一层常规边框,再加上 outline(描边) 属性来产生外层的边框

通过 outline-offset 属性来控制跟元素边缘之间的间距,可以接受负值(缝边效果)

边框不一定会贴合 border-radius 属性产生的圆角,因此如果元素是圆角的,它的描边可能还是直角的

边框内圆角

问题：只要一个元素

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

描边不会跟着元素圆角走，box-shadow 会

投影扩张值不能小于 (√2 −1)r，（r为border-radius值）

连续图像边框

蚂蚁行军边框

@keyframes ants {
  to {
    background-position: 100% 
  } 
}
.marching-ants {
  padding: 1em;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
              repeating-linear-gradient(-45deg,black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
  animation: ants 12s linear infinite;
}

混合云服务器托管文字边框设置边框图片边框无边框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116524.html

前端学习之路之CSS （四）

摘要：块元素的例子内联元素只需要必要的宽度，不强制换行。内联元素的例子如何改变一个元素显示可以更改内联元素和块元素把列表项显示为内联元素把元素作为块元素定位五大属性定位元素的默认值，即没有定位，元素出现在正常的流中静态定位的元素不会受到影响。 Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型概念：CSS盒模型本质上是一个盒子，封装周围...

hosition 2019-04-23 13:19 评论0 收藏0
【基础】CSS实现多重边框的5种方式

摘要：简言目前最优雅地实现多重边框的方案是利用的属性，但如果要兼容老的浏览器，则需要选择其它的方案。方案是最简单，最直接的实现多重边框的方式。只有一行代码就可以实现多重边框效果。简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最...

mrli2016 2019-08-29 15:16 评论0 收藏0
HTML补充+CSS基础

摘要：文件的编码格式页面的编码格式设置当前页面的编码格式在浏览器运行当前页面时，告诉浏览器当前的编码格式字符集概念存放所使用的所有的字符汉字分类美国欧洲中国万国码主要使用计算机的存储方式利用二进制方式和中国存储将文件的编码格式 - UTF-8 HTML页面的编码格式 - UTF-8 设置当前HTML页面的编码格式在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式字符...

CoorChice 2019-08-29 12:39 评论0 收藏0
CSS实现无外边框列表效果

摘要：方法一使用外层容器切割方法一使用外层容器切割给每一个设定右边框和下边框线把放置在一个外层中，设定的宽高，通过将一部分的边框隐藏此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。方法一：使用外层容器切割给每一个 li 设定右边框和下边框线把ul放置在一个外层div中，设定div的宽高，通过overflow:hidden将一部分li的边框隐藏此方法只需要计算父容器的宽高，能应...

kbyyd24 2019-04-23 11:46 评论0 收藏0
CSS3 边框

摘要：边框用，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如。在本章中，您将了解以下的边框属性圆角在中添加圆角棘手。 CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： border-radius box-shadow border-image CSS3 圆角在 ...

Charles 2019-08-29 13:25 评论0 收藏0
详解css3之border-image

摘要：属性用来指定边框所需素材的路径，语法可以参照。当图片碰到边界时，如果超过则被截断。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。如下图后续是属性所以存在兼容性问题，需要在属性前面设置等 border-image简介 css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-...

jackzou 2019-08-21 10:46 评论0 收藏0