CSS半透明边框效果

源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{width:500px;height:309px;border:50px solid  hsla(0,0%,100%,0.5);background:url(file:///C:/Users/Administrator/Desktop/timg11111.jpg) -50px  -50px no-repeat;}</style>
</head>
<body>
<div></div>
</body>
</html>

1、HSL颜色模式不太理解。

2、background-clip属性。

background-clip:border-box;

以border外边缘为边界剪除背景，背景范围为border、padding、content。

background-clip:padding-box;

以padding外边缘为边界剪除背景，背景范围为padding、content。

background-clip:content-box;

以content外边缘为边界剪除背景，背景范围为content。

background-clip属性实例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{background:black;}div{width:200px;height:200px;padding:0 50px;border:10px solid hsla(0,0%,100%,.5);background:red;}
.class-padding-box{background-clip:padding-box;}.class-border-box{background-clip:border-box;}
.class-content-box{background-clip:content-box;
}
</style></head>
<body>
<div class='class-padding-box'></div>
<div class='class-border-box'></div>
<div class='class-content-box'></div>
</body>
</html>

CSS半透明边框效果相关推荐

C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
html实现信封效果,css信封边框效果实现的2种方法
信封边框信封描边的效果大致如下图所示,这里的边框有红白蓝三种颜色,所以可以使用重复线性渐变的方法来完成: 信封边框有两种实现思路: 1.使用背景渐变html> .uu{ width: 200p ...
CSS边框应用 - 半透明边框
相信你以前肯定尝试过 CSS 中的半透明颜色, 比如 rgba() 和 hsla().半透明颜色是 2009 年发生的一场重大变革. 从那以后, 我们终于可以在网页设计中使用它们了, 但是为了尝鲜还需 ...
CSS整理半透明边框
1.半透明边框问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框,我们可能会这样写: border: 20px solid rgba(0,0,0,0.5); background: red ...
css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果
用css实现边框的动态渐变色效果,希望对各位能有一些帮助. 边框.html <!DOCTYPE html> <html lang="en"><head ...
2021年10个最美的边框效果,CSS实现,可以直接使用
1. 动画CSS边框当我们想使我们的项目更可见时,该怎么办? 来给它做个动画! 我们可以对我们的边框进行动画化处理,甚至在不改变元素大小的情况下也可以进行动画化处理,非常简单. 要做到这一点,我们只 ...
CSS鼠标悬停div加边框效果
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
css多重效果,css奇技淫巧—box-shadow与outline绘制多重边框效果
css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...

CSS半透明边框效果

CSS半透明边框效果相关推荐

最新文章

热门文章