半透明边框——《css揭秘》

ozhanjun 2019-11-04 

<style type="text/css">
        .wrapper{
            height: 50px;
            width: 50px;
            border: 10px dashed rgba(108, 150, 228, 0.5);
            background: rgb(223, 118, 118);
            padding: 10px;
        }
        body{
            background-color: #1e6109;
        }
    </style>

<body>
    <div class="wrapper">
        
    </div>
</body>

这个时候会显示出这样的效果。
半透明边框——《css揭秘》
如果在加上background-clip属性就会不一样。
（1）默认的background-clip是border-box，从border区域向外裁剪背景。
（2）如果为padding-box，从padding区域向外裁剪背景，就会变成下面这样。
半透明边框——《css揭秘》
（3）如果为content-box，从content区域向外裁剪背景，就会变成下面这样。
半透明边框——《css揭秘》

ozhanjun

ozhanjun

相关推荐

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi / 0评论 2020-08-09

CSS（五）- 背景与边框 - 边框圆角与阴影基础用法

本文仅仅做border的基础使用，想要深入了解的话可以戳以下几个链接，觉得作者写的很好。border:style：dotted（点）、dashed（虚线）、solid（实线）、double、其它3D. 如今只有IE8和Opera Mini不支持border

猫沙盆 / 0评论 2020-07-08

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。这里我们利用transparent的透明颜色来代替。上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？整体

猫沙盆 / 0评论 2020-07-07

css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变的方法，以便大家学习参考！

云端漂移 / 0评论 2020-07-05

css实现div多边框_box-shadow模拟多边框、outline描边实现

在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径

SuiKaSan的自学室 / 0评论 2020-06-13

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

福叔 / 0评论 2020-06-02

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

CaiKanXP / 0评论 2020-06-02

css解决移动端1px边框问题

@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.bo

opspider / 0评论 2020-05-29

来看下css边框阴影怎么设置？这些方法掌握后工作更轻松

我们在网页设计中，通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影，下面本篇文章来给大家介绍一下。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、

jiedinghui / 0评论 2020-05-14

9个很棒的CSS边框技巧，对你的样式设计有重要帮助

如果您是前端开发人员，那么几乎每天都会使用CSS边框。我发现了一些可以在您的项目中使用的有用的技巧。当我们想使我们的项目更可见时，该怎么办?我们可以对我们的边框进行动画化处理，甚至在不改变元素大小的情况下也可以进行动画化处理，非常简单。要做到这一点，我们只

wcssdu / 0评论 2020-05-11

css盒模型

padding：内边距，边框到内容的距离。盒子的真实宽度=height+2*padding+2*border

sdbxpjzq / 0评论 2020-04-21

css解决盒子水平排列边框叠加变粗的问题

对第一个和第二个盒子都添加margin-left:-mpx;，这样两个边框就重叠在了一起，就不会看起来有加粗的效果了。第一个盒子向左移动mpx，第二个盒子也向左移动mpx，两个盒子的相对位置并没有改变。浏览器在渲染的时候，先对盒子1进行执行，完全执行完盒子

somboy / 0评论 2020-04-19

去掉谷歌浏览器获取焦点时默认的input、textarea的边框

Chrome上当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框。我用这个CSS，没有用。

zengni / 0评论 2020-04-16

CSS实现对角边框样式

左下——右上对角边框，也可以左上——右下对角、四个角。

impress / 0评论 2020-04-15

移动端 1px边框 问题

本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。设备独立像素又被

somboy / 0评论 2020-02-23

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

jiedinghui / 0评论 2020-02-20

巧妙实现带圆角的渐变边框

border-image是 CSS 规范CSS Backgrounds and Borders Module Level 3 新增的一个属性值。顾名思义，我们可以给 border 元素添加 image，类似于background-image，可以是图片也可

MaureenChen / 0评论 2020-02-17

css的盒子模型

块级元素<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>、<dl> 、<dt> 、<dd>等。默认值h

云端漂移 / 0评论 2020-01-31

解决Td内容为空时不显示边框的问题-兼容IE、firefox、chrome

创建好table，给table、td等设置好边框后，无意间发现td里没有内容的时候，边框竟然不会显示。开始的时候很懒，就在每个td里都先加一个空格， 然后再把内容加到这个空格后面，这些，就算本身没有内容，但是有了空格，边框就会被显示。遇到问题还是要找直接的

cfang00 / 0评论 2013-05-15

CSS3(1)---圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。bor

impress / 0评论 2020-01-11

巩固下CSS，CSS太复杂~

css是什么SS 指层叠样式表 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个。语法CSS声

nicepainkiller / 0评论 2019-12-30

Qt qss浅析

qss实际就跟web的css没有差别，就是封装到Qt里面的一种说法，接下来举个例子qss对于btn,在qss可以满足的情况下是不会去重写paintevent()的，u know.

冰蝶 / 0评论 2019-12-28

VUE中CSS去除Input的边框样式和阴影

在style标签中加上下面一段代码看效果~~

CaiKanXP / 0评论 2019-12-16

CSS3(1)---圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。bor

zhanghao / 0评论 2019-12-12

css盒子模型之边框宽度，边框颜色与边框样式

width和height只是设置盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定。如果border-width后面跟一个值，则设置的是上，右，下，左边框的宽度都是该值；如果border-width后面跟两个值，则分别设

zengni / 0评论 2019-12-03

盒子模型

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

wangjie / 0评论 2019-11-08

input获得焦点时，如何让外边框不变蓝

border 可应用于几乎所有有形的html元素，而outline 是针对链接、表单控件和ImageMap等元素设计。outline的效果将随元素的 focus 而自动出现，相应的随 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript

lcyangcss / 0评论 2019-10-23

CSS表格笔录

DOCTYPE，以上属性可能产生意想不到的结果。collapse（缩合）边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。<caption&g

尚衍亮 / 0评论 2018-02-01

html与css入门——CSS样式基础

布局属性，有影响Web页面上的元素定位的属性组成，比如边距、填充和对齐方式。格式化属性，由影响Web站点内的元素的视觉显示的属性组成，比如字体类型。基本的布局属性，最重要的布局属性之一是display属性，它描述了如何相对与其他元素显示的一个元素。②lis

走向WEB开发 / 0评论 2017-11-10

CSS 使用图片作为4个角边框

父及元素定位方式position: relative;四个角的图片定位为position: absolute;-webkit-border-image:url 30 30 round; /* Safari 5 */

懵懂听风雨 / 0评论 2018-09-27

CSS 控制 input 只显示下划线效果

比如将上、右、左边框宽度设置为0，下边框为1，颜色根据需要调整

realitycss / 0评论 2018-09-11

css虚线样式怎么实现?

　在前端开发过程中，经常会用到css虚线样式。但很多css初学者都不知道该如何去写css虚线样式怎么实现。好了，废话不多说，直接上代码：

懵懂听风雨 / 0评论 2017-06-06

学习《精彩绝伦的CSS》

当省略了部分简写属性值的时候，缺失的部分就会使用该属性的默认值。边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的，CSS可以用边框属性来定义它的样。式、颜色和宽度等。边框分为上边框、右边框、下边框、左边框。

purecss / 0评论 2012-08-09

《CSS揭秘》-背景与边框

值描述border-box背景被裁剪到边框盒padding-box背景被裁剪到内边距框content-box背景被裁剪到内容框border: 20px solid hsla;支持逗号分割语法，我们可以创建任意数量的投影。box-shadow是层层叠加的，第

Alisa0 / 0评论 2019-06-30

css实现边框动画

transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

CoderChang / 0评论 2019-06-30

004-盒模型及文本溢出

什么是盒模型盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。盒模型填充（内边距）

yaodilu / 0评论 2019-06-29

去掉antd的Input组件获取焦点时的蓝色边框

antd的Input输入框组件在获取焦点时会有蓝色的边框显示，最初尝试通过设置outline:none的方法去掉这个边框，但是发现这个方法不起作用。最终通过在F12调试页面下的Elements选项下的多次观察和实验，发现antd的Input组件在获取焦点情

王为仁 / 0评论 2019-06-29

CSS 控制 input 只显示下划线效果

比如将上、右、左边框宽度设置为0，下边框为1，颜色根据需要调整

startXUEBA / 0评论 2018-09-11

CSS表格笔录

DOCTYPE，以上属性可能产生意想不到的结果。collapse（缩合）边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。如果显示，就会绘制出单元格

淡风wisdon大大 / 0评论 2018-02-01

html与css入门——CSS样式基础

布局属性，有影响Web页面上的元素定位的属性组成，比如边距、填充和对齐方式。格式化属性，由影响Web站点内的元素的视觉显示的属性组成，比如字体类型。基本的布局属性，最重要的布局属性之一是display属性，它描述了如何相对与其他元素显示的一个元素。②lis

sdbxpjzq / 0评论 2017-11-10

Input元素去除获取焦点时的边框

在网页中，用tab键切换时，文字链接、搜索框、按钮等的外面会有一个虚线框，此时当前的元素就获得了焦点，可以对其进行操作。outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline是一个简写属性，在一个声明中设置

AnyBisks / 0评论 2017-11-02

css 边框

顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。background:url 10px 20px no-repeat;但是又比背景图片复杂一些。

怀抱清风 / 0评论 2017-04-26

css框模型

h1 {padding: 10px 0.25em 2ex 20%;}如果上、右、下、左的值一样可以这样写。margin 可以是任何长度单位。margin: top right bottom lefth1 {margin : 10px 0px 15px 5p

ThikHome / 0评论 2017-04-23

css简单实现带箭头的边框

<div class="triangle-bottom"></div>将左右下边颜色设置为透明 transparent，得到向下的箭头。<div class="border-triangle-bo

impress / 0评论 2019-06-28

HTML&CSS基础学习笔记1.18-表格的边框

前面为了方便观察表格单元格的情况，我们给<table>加了border属性。<table>的border属性规定围绕表格的边框的宽度。如果border属性的值发生改变，只有表格周围边框的尺寸会发生变化，表格内部的边框不受影响。<

csscode / 0评论 2016-08-10

css 边框

dotted: 在MAC平台上IE4+与WINDOWS 和UNIX平台上IE5.5+为点线，否 则为实线。与任何指定的border-width值无关。使用 border-radius 属性，可以给任何元素制作 "圆角"。如果在四个角

zhanghao / 0评论 2016-07-17

【丛林】CSS 边框浅谈

定义和用法围绕元素内容和内边距的一条或多条线。如果边框样式是 none，边框宽度实际上会重置为 0。不过应用于表时除外，对于表，hidden 用于解决边框冲突。在大多数浏览器中呈现为实线。双线的宽度等于 border-width 的值。其效果取决于 bor

yibawuqing / 0评论 2019-06-28

CSS盒子模型

盒子模型-边框盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色div{ border-width:2px; border-style:solid; border-color:red;}border-style常见样式有：dash

tianzyc / 0评论 2016-01-14

[CSS]《CSS揭秘》第二章——背景与边框

半透明边框border:10px solid hsla;相关语法：background-clip: border-box|padding-box|content-box;多重边框box-shadow方案box-shadow: 0 0 0 10px red,

nicepainkiller / 0评论 2019-06-27