css效果（两边渐渐消失的线、边框上下渐变）

两边渐渐消失的线

html如下：
<div class="title titleLeft"></div><div class="line"></div>
<p class="text">这是一段内容</p>
<div class="line"></div><div class="title titleRight"></div>
css如下：
.title{width: 96px;height: 1px;background: #ff72a3;float: left;margin-top: 14px;}.titleLeft{background:linear-gradient(to right,#efefef,#ff72a3);}.titleRight{background:linear-gradient(to left,#efefef,#ff72a3);}.line{float: left;height: 30px;width: 4px;background: #ff72a3;}.text{float: left;margin: 5px 18px;}

效果如下：

边框上下渐变

html如下：
<div class="border">内容 </div>
css如下：
.border{position: relative;border: 1px solid transparent;border-radius: 14px;padding: 10px;background: #fff;display: block;width: 50px;height: 50px;margin: 50px;text-align: center;line-height: 50px;}.border::after{position: absolute;top: -4px;bottom: -4px;left: -4px;right: -4px;background: linear-gradient(#ffbfb6, #fd74a2);content: '';z-index: -1;border-radius: 16px;}

效果图如下：

css效果（两边渐渐消失的线、边框上下渐变）相关推荐

css逐渐消失,css如何实现渐渐消失
css实现渐渐消失的方法:首先用"@keyframes"规则和animation属性定义动画:然后在动画开始部分添加"opacity:1;"样式,设置正常状态: ...
原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
html 漂亮的边框效果图,Css效果之好看的边框颜色大全
Css效果之好看的边框颜色大全今天分享一些好看的边框颜色,需要的可以直接拿走使用. 效果图: html代码: 分享JavaScript-sharejs.com body{ background-co ...
Css效果之好看的边框颜色大全
Css效果之好看的边框颜色大全今天分享一些好看的边框颜色,需要的可以直接拿走使用. 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
UIView 渐渐出现和渐渐消失了动画效果
渐渐出现 self.photoView = [[PhotoShowView alloc]initWithFrame:PJ_MainScreen]; self.photoView.transform ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

css效果（两边渐渐消失的线、边框上下渐变）

两边渐渐消失的线

边框上下渐变

css效果（两边渐渐消失的线、边框上下渐变）相关推荐

最新文章

热门文章