CSS3中的渐变和圆角

渐变:
backgroud:linear-gradient()
语法:linear-gradient(起点,开始颜色,结束颜色);
  起点:top,right,bottom,left,top left,top right, bottom left,bottom right,
例:

1
2
3
4
5
6
7
8
9
.test{
    background:-moz-linear-gradient(top,#fff,#000);
    background:-webkit-linear-gradient(top,#fff,#000);
    background:-ms-linear-gradient(top,#fff,#000);    //IE9以上版本才支持;
    background:-o-linear-gradient(top,#fff,#000);
    background:linear-gradient(top,#fff,#000);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #fff, endColorstr = #000)";      //IE8.0 版本可以识别;
    +background:#ccc;                 //针对IE6 IE7设置纯色背景色;
}

 

圆角效果:
border-radius:20px 10px 5px 0;      //顺时针四个角的圆角值;IE6、IE7、IE8不支持圆角效果
    正圆:border-radius:50%; 

 

阴影效果:
box-shadow:3px 3px 2px #CCC;    x偏移,y偏移,扩散值, 颜色值

 

关于背景图的维护:
1、不要把所有的背景图都放在一张图片上,根据功能性进行大类划分,然后把功能相似的图标、背景图放在一张图片上。
2、使用background-position进行精确定位,需要注意各图片的上下距离,留好足够的空间。

1
2
3
4
.bg_sprite{background-image:url(); background-repeat:no-repeat}
#ico1 {width:宽度;height:高度;background-position:X坐标 Y坐标}
#ico2 {width:宽度;height:高度;background-position:X坐标 Y坐标}
#ico3 {width:宽度;height:高度;background-position:X坐标 Y坐标}

 

  

posted @   不由分说  阅读(1772)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
阅读排行:
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)
点击右上角即可分享
微信分享提示