css3 如何实现圆边框的渐变

css3 如何实现圆边框的渐变? 如图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
		div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
		div:before {content:""; display:block; width:100px;height:50px; margin-top:10px; padding:10px; padding-bottom:0; box-sizing:border-box;
			border-top-left-radius:50px;
			border-top-right-radius:50px;
			background:-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#fff)
			),-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#077df8),
				color-stop(1,#74baff)
			);
			background-clip:content-box,padding-box;
		}
		div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box;
			border-bottom-left-radius:50px;
			border-bottom-right-radius:50px;
			background:-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#fff)
			),-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#74baff)
			);
			background-clip:content-box,padding-box;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
时间: 2024-11-03 14:35:00

css3 如何实现圆边框的渐变的相关文章

css3:border-radius圆角边框详解 (变圆 图片)

转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角.当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返,而移动互联网的高速发展为border-radius属性的飞速发展,so今天就来聊聊圆角边框.虽然英文翻译过来叫做半径弧度,但是为了能让大家更加熟悉

css3 设计多色边框

CSS3中有关于Border的属性一共有三个:设计圆角border-radius,设计边框背景border-image,设计多色边框border-color. 现在我们来说一说设计多色边框border-color属性:那么在CSS3中这个属性又有什么不同之处呢?又将如何使用呢?在CSS2中,我们可以把border-color同时应用到不同的边框上,也可以分别在各边上色,如: border-color: <color>/*其中可以上一个值,也可以是多个值,具体我在这里不多说了,大家用到的也特别多

圆角边框和渐变

Demo2\aa\src\main\res\drawable\bg_border.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 3 <!--设置背景色为透明色--> 4 <solid android:color="#

CSS3学习系列之边框

一.各家浏览器的兼容 要兼容每一个主流浏览器的话就要加前缀,下面我列出浏览器的前缀 前缀            浏览器 -webkit      chrome和safari -moz            firefox -ms               IE -o                  opera 二.边框 1.圆角效果 border-radius是向元素添加圆角边框 border-radius:10px /*所有交都使用半径为10px的圆角*/ border-radius:5p

【控件扩展】带圆角、边框、渐变的panel

下载地址:  http://files.cnblogs.com/chengulv/custompanel_demo.zip using System; namespace LC.Fun { /// <summary>Panel扩展 带圆角,颜色渐变</summary> [System.Drawing.ToolboxBitmapAttribute(typeof(System.Windows.Forms.Panel))] public class RoundPanel : System

android 圆角边框、渐变背景的TextView

加一个红色的边框: textView的XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_

css:设置div边框透明+渐变

写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+渐变边框.但是,又不能不做是不是,费了一番心思查资料,下面是解决方案: 1.分成两个div叠加的形式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

边框的渐变

针对边框的渐变色其实有两种理解: 第一种是纯边框: 写法是: border:1px solid #ddd; border-image: -webkit-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20; border-image: -moz-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20; border-image: -o-linear-gradient(#da9f11, #daa21e , #

CSS3(2)边框

CSS3 圆角 在 CSS2 中添加圆角棘手.我们不得不在每个角落使用不同的图像. 在 CSS3 中,很容易创建圆角. 在 CSS3 中 border-radius 属性被用于创建圆角: 这是圆角边框! border-radius 属性允许您为元素添加圆角边框! 代码: <div style="border: 2px solid #a1a1a1; padding: 10px 40px; width: 320px; border-radius: 25px;">border-r