码迷,mamicode.com
首页 > Web开发 > 详细

css 弧度

时间:2018-08-29 14:49:28      阅读:590      评论:0      收藏:0      [点我收藏+]

标签:nbsp   index   1.9   https   radius   pre   head   overflow   模糊   

style

.head-bg {
				position: absolute;
				height: 1.9rem;
				width: 100%;  
				overflow: hidden;
				z-index: -1;
				
			} 
.head-bg .bgImg{ 
				position: absolute;  
				content: ‘‘;
				z-index: 1;
				height: 2.5rem;
				top: -.6rem;
				left: -75%;
				width: 250%;
				border-radius: 50%; 
				overflow: hidden;
			}
.head-bg .bgImg:after{
				position: absolute;  
				content: ‘‘;filter:blur(10px);   //模糊
				z-index: 1;
				height: 3.9rem;
				top: -1rem;
				left: 0;
				width: 100%;
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536115840&di=9fbd7bb1fd052bceb0b3c47833e4c084&imgtype=jpg&er=1&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg) no-repeat center;
				background-size:200%;
			}



html
<div class="head-bg"><div class="bgImg"></div></div>

  

 

 

css 弧度

标签:nbsp   index   1.9   https   radius   pre   head   overflow   模糊   

原文地址:https://www.cnblogs.com/yjgbk/p/9552997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!