css圆角特效

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css圆角特效</title>

<style>

div{

text-align: center;

font-size: 32px;

width: 100px;

color: white;

padding: 10px;

margin: 10px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

}

.box1{

background-color: black;

}

.box2{

background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999));

background: -moz-linear-gradient(top,red,blue);

}

.box3{

background-color: blue;

-webkit-box-shadow:3px 3px 5px #000;

-moz-box-shadow: 3px 3px 5px #000;

}

</style>

</head>

<body>

<div class="box1">圆角1</div>

<div class="box2">圆角2</div>

<div class="box3">圆角3</div>

</body>

</html>

.rounded_sch_btn  {
width: 90px;
height: 30px;
/* border: 1px solid #999999; */
background-color: #f6bb46;
color:#fff;
text-align:center;
line-height:30px;
cursor:pointer;
border-radius: 4px;
-moz-border-radius: 180px;
-webkit-border-radius: 180px;
}

时间: 2024-10-07 01:51:08

css圆角特效的相关文章

收获2.css圆角总结

css圆角想必大家再熟悉不过了,下面分享一些我知道的,你有可能不知道的知识~~~~ 使用圆角有以下几种方法 1.切图 将四个圆角切图,将父元素设置relative,将四个角通过absolute定位到固定位置,在父元素不设置高宽时,是可以自适应的,这种方法想必大多数人都知道 就不再废话了. 如果需要兼容ie,那么此方法是最好的选择了. 2.像素画 使用html+css2.0绘制圆角弧度 HTML代码 <div class="wrap"> <div class="

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

css圆角矩形属性

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; css圆角矩形属性,布布扣,bubuko.com

CSS圆角样式

CSS圆角: #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5px solid #ff6600; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ /* •-moz(例如 -m

HTML5 纯css圆角代码

<html> <head> <title>河北礼品公司</title> </head> <style> #test { border:1px solid #ccc; background:#fff; padding:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> <body>

纯css圆角边框

第一章.基本的圆角框 原创:冰极峰 转载请注明出处 2009年11月30日10:19:34 文章导航: 第一章:基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0 序言:在我的文章<超圆滑圆角框的半完美解决方案>中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案.而在我的另一篇文章<无图片山顶角>中又是一个另类的实现方法. 纯CSS实 现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会

css 圆角

一.支持的浏览器 浏览器 支持性 Firefox(2.3+) √ Google Chrome(1.0.154+…) √ Google Chrome(2.0.156+…) √ Safari(3.2.1+ windows) √ Internet Explorer(IE7, IE8) × Opera 9.6 × 二.用途及其优势 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新

兼容性很好的纯css圆角

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>纯css圆角</title> <style type="text/css"> #xsnazzy h1,#xsnazzy h2,#xsnazzy p{margin:0 10px;letter-spacing:1px;} #

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu