CSS3透明背景+渐变样式

简介: 直接上效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 90%

直接上效果:


核心代码如下:

.map-interview {
    background-image:-webkit-linear-gradient(
    to right, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0.4) 5%, 
    rgba(0,0,0,0.6) 10%, 
    rgba(0,0,0,0.6) 90%, 
    rgba(0,0,0,0.4) 95%, 
    rgba(0,0,0,0) 100%);
  background-image: linear-gradient(
    to right, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0.4) 5%, 
    rgba(0,0,0,0.6) 10%, 
    rgba(0,0,0,0.6) 90%, 
    rgba(0,0,0,0.4) 95%, 
    rgba(0,0,0,0) 100%);
  height: 220px;
  left: 50%;
  margin-left: -350px;
  margin-top: -110px;
  padding: 10px 0px 10px 30px; 
  position: absolute;
  top: 30%;
  width: 700px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

Best Wishes For You!

目录
相关文章
|
5天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
38 1
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
14天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
31 2
|
1月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
68 1
|
1月前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
15天前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
29 0
|
15天前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
28 0
|
1月前
|
前端开发
css <样式一>
css <样式一>
17 1
|
1月前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
40 6
|
1月前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
23 0