css:设置div边框透明+渐变
2024-10-18 09:15:08
写作背景:
觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框。效果图如下:
在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+渐变边框。但是,又不能不做是不是,费了一番心思查资料,下面是解决方案:
1、分成两个div叠加的形式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.one {
width: 300px;
height: 300px;
border-radius: 6px;
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.4) 10%, rgba(167, 166, 166, 0.6) 90%, rgba(150, 148, 148, 0.8) 95%, rgb(175, 173, 173) 100%);
margin: 0 auto;
padding: 50px;
} .two {
width: 280px;
height: 280px;
background-color: rgb(158, 106, 106);
border-radius: 6px;
}
</style> <body>
<div class="one">
<div class="two"></div>
</div>
</body> </html>
效果图:
最新文章
- archlinux安裝手记(Win10+Arch、GPT+UEFI、lvm)
- H5播放器
- 前端模板artTemplate,handlerbars的使用心得
- sybase参数调整
- linux安装配置sendmail实现邮件发送
- java基础学习总结二(标识符、字符集、数据类型以及类型转换)
- CodeForces 340E Iahub and Permutations
- mac os 安装 wget
- linux 看执行任务的一些邮件
- 字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8
- [Android] 基于 Linux 命令行构建 Android 应用(七):自动化构建
- Grin v0.5在Ubuntu下的安装和启动
- HTML5读取本地文件
- 阿里云ECS 利用快照创建磁盘实现无损扩容数据盘
- linux-指定特殊域去重
- faceswap安装说明
- 富文本插件KindEditor
- Android-Sqlite-OOP方式操作增删改查
- 2019.3.26 为什么说HTTP是无状态协议/无连接
- 如何用纯 CSS 创作气泡填色的按钮特效