注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

CSS圆角效果-CSS3常用属性集合

实用代码 开心洋葱 3176次浏览 已收录 0个评论 手机上查看

CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此:

{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}

{moz内核游览器,webkit内核游览器,IE9}


Web2.0中,圆角效果是很常见的,以前都是用图片来模仿,现在直接用css就能实现,例子代码如下
Html代码:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>

<style type=”text/css”>
body{
padding: 20px;
background-color: #FFCC66;
font: 100.01% “Trebuchet MS”, “Verdana”, “Arial”, “sans-serif”;
color: #000000;
}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#roundconner{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFCC66}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>

<body>
<div id=”roundconner”>
<b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b class=”r3″></b><b class=”r4″></b></b>
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b><b class=”r2″></b><b class=”r1″></b></b>
</body>
</html>


只要新建一个html文件,把里面都内容全部替换成上面的代码就可以看到效果了

 


border-radius:(圆角)

  border-radius语法为:border-radius : none | <length>{1,4} [/ <length>{1,4} ]? “/”前是指圆角的水平半径,而“/”后是指圆角的垂直半。

  1.border-radius:10px; 当它只有一个值的时候,代表了四个角,如图:

CSS圆角效果-CSS3常用属性集合

  2.border-radius:20px 5px 20px 5px;当它取四个值的时候,也许我们能换成如下更直观的CSS代码:

<span style="color: rgb(128,0,0)">                border-top-left-radius: 20px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 20px;
                border-bottom-left-radius: 5px;</span>

它的顺序位置分别是左上角->右上角->右下角->左下角,效果图如下:

CSS圆角效果-CSS3常用属性集合

  3.border-radius:20px 5px; border-radius:20px 5px 40px;

[第一项的意思是与例子2相同,取两值,意思是左上角与右下角为20px,右上角与左下角为5px。]

[第二项的意思,当取三值的时候,左上角为20px,右上角为5px,右下角为40px,左下角为5px。] 效果图如下:

CSS圆角效果-CSS3常用属性集合CSS圆角效果-CSS3常用属性集合

 

  4.border-radius:20px 5px / 30px 30px;

前两项取值,是水平位置,后两项取值是垂直位置,它们与上述位置对应,左右右左。如图:

CSS圆角效果-CSS3常用属性集合

rgba:(R+G+B+Alpha)

语法格式:rgba(255,0,0,1);

它们分别对应颜色,饱和度,亮度,透明度。

应用:字体阴影等。

 

text-shadow:(文字阴影

语法格式:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]。#p#分页标题#e#

一个无text-shaodw效果的字体图片,如下:

CSS圆角效果-CSS3常用属性集合

从语法格式上,我们能看到,先取颜色,然后X轴,Y轴,模糊的半径。X轴:是阴影水平偏移的距离,正向右负向左。Y轴:是阴影垂直偏移的距离,正向下负向上。模糊半径的意思是:其模糊的程度,不能有负数值,值越大阴影越模糊,反之阴影则越清晰。

  1.text-shadow:#333 0 3px 2px; 如图:

CSS圆角效果-CSS3常用属性集合

  2.text-shadow:还能在一组字体上运用多个阴影,用’,’相隔开即可。

box-shaodw(图层阴影)

语法格式:box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [最多六个值可取]

说明:

  投影方式:这里可选外,还是内。inset[内],不选[内]

  X轴:水平偏移的方向,正向右负向左。

  Y轴:垂直偏移的方向,正向下负向上。

  阴影模糊半径:只能为正数值,越大越模糊。

  阴影扩展半径:正扩大负缩小。

  阴影颜色:就是颜色了。

  1.box-shadow:inset 0px 0px 10px 10px #936;

  

CSS圆角效果-CSS3常用属性集合

  2.box-shadow: 0px 0px 10px 10px #936;

CSS圆角效果-CSS3常用属性集合

  3.box-shadow: inset 10px 10px 10px -10px #936;

CSS圆角效果-CSS3常用属性集合

业精于勤,荒于嬉。行成于思,毁于随。


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明CSS圆角效果-CSS3常用属性集合
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

……