当前位置:首页 > 心得日志 > 正文
作者

CSS3一些代码!

扫描二维码分享到朋友圈

1.美化按钮:

默认按钮文字并居中:

#menu a:link{
margin-right:auto;
margin-left:auto;
color:#FFFFFF;
background: #a5cd4e;
display: inline-block;
position:relative;
height:30px;
line-height:30px;
vertical-align:middle;
text-decoration: none;
font: bold “Microsoft YaHei UI” ;
-webkit-box-shadow:30px;
padding:0 30px 0px;

鼠标放上时变颜色:

#menu a:hover{
margin-right:auto;
margin-left:auto;
color:#FFFFFF;
background:#00ccff;
display: inline-block;
position:relative;
height:30px;
line-height:30px;
vertical-align:middle;
text-decoration: none;
font: bold “Microsoft YaHei UI” ;
-webkit-box-shadow:30px;
padding:0 30px 0px;

}

 

2.两种圆角图片方法:

一、直接在图片上做手脚 :

<img src=”22.jpg” id=”pic”></img>

 

#pic

{

margin:10px;

-webkit-box-shadow:2px 1px 2px #000;  //*这是做阴影的。

border-radius:12px 12px 12px 12px;  //*这一步就是圆角的。

width:185px;

height:185px;

}

 

 

二,在DIV上做手脚:把图片做为DIV的背景图片:

<div id=”cente1″>我爱玩应用</div>

div#cente1

{

background:url(22.jpg) no-repeat;

background-position:top;

top:50%;

width:152px;

height:152px;

border-radius:15px 15px 15px 15px; //*这一步是做圆角的。

font-size:30px;

color:red;

position:relative;

font:bold;

border:#000000;

border-style:solid;

border-width:0px;

float:left;

clear:right;

margin:30px;

-webkit-box-shadow:2px 1px 2px #000;

line-height:252px;

}

详见:http://www.wooaii.com/qq.html



690 条评论

  1. 地板2017-01-08 上午 1:12回复
    Wokani Dexo

    Hi there, just became aware of your blog through Google, and found that it’s truly informative. It’s important to cover these trends.

  2. 板凳2017-01-15 上午 8:05回复
    mortgage interest comparison

    Major thankies for the blog article.Really looking forward to read more. Great.

  3. 沙发2017-01-16 上午 9:24回复
    Melodee

    Hello! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on. You have
    done a wonderful job! http://m.pfamaqa.sms.morris.com/nokia-x9-deals-pipeline-handset-has-got-lucrative-deals

发表评论


无觅相关文章插件,快速提升流量