龙岗网站建设,龙岗网站建设,龙岗网站设计,龙岗网站代码
 
 
建站常识
/go100.net
 
网站建设相关概念知识
给建站新老手推荐3个CS..
如何挑选网站关键词?
HTML中DIV的浮动、..
龙岗网站建设要注意网站导航
CSS中的两种选择器id..
怎么解决网站在在e7、8..
唯品会周年庆 ..
html5建站需要注意点..
jquery设为首页、加..
 
您当前的位置:
  网站建设
 
前端CSS3技术,让制作更多可能! 发布人:龙岗网站建设
分享到:
发布时间:2014-08-25

    先略过设计和编程环节,从前端制作页面特效方法来看,css绝对是门不可不知的好技能。有时,几句简短的代码,就能轻轻松松解决让人苦思冥想的设计难题,并且让网站整体看起来更加和谐。下面为大家小举几个常见的例子,来阐述一下CSS3的妙用:

  box-shadow:阴影再现不是问题。
  示范代码:
  <style type="text/css">
  #mydiv {
  -moz-box-shadow:20px 10px 7px #06C;
  -webkit-box-shadow:20px 10px 7px #06C;
  box-shadow:20px 10px 7px #06C;
  } /* Safari */
  </style>

  border-radius:圆角效果成为可能。
  示范代码:
  <style type="text/css">
  body,div{margin:0;padding:0;}
  .border{width:200px;border:10px solid gray;height:20px;
  -moz-border-radius:10px;/* Firefox */
  -webkit-border-radius:10px;/* Safari,Chrome */
  -khtml-border-radius:10px;/* Safari,Chrome */
  border-radius:10px;/* Opera,Safari,Chrome */
  }
  </style>

  background:渐变过渡早有妙招。
  示范代码:
  background: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

  除了上述三种特效代码外,css3还可以控制背景图片的尺寸,只要对background-size、background-repeat等属性稍加定义,即可实现恰到好处的图片背景。实践出真知,倘若您觉得不可思议,就请在制作页面的过程中,试着添加类似的代码吧!

 
温馨提示:本内容发布于龙岗网站建设(http://www.go100.net),欢迎您转载,请保留版权!
 
 
上一条: 网站用户体验没有标准——需求持续变化
下一条: 网站搜索框程序的写法有哪几种
 
 
[ 相关更新 ]
· 龙岗网站建设讲述当前建网站需要注意的要点
· 为什么要选择做响应式网站
· 什么是响应式网站
· 流量多样化才能让网站更加健全
· 微信网站开发需要懂得哪些技术?
 
Site Map
 
· 套餐报价
· 功能模块
· 售后服务
 
· 网站优化
· 优化报价
 
· 域名注册
· 空间租用
· 企业邮局
 
· 外贸网站建设
· 模具网站建设
· 五金网站建设
· 家具网站建设
· 其他类案例
 
· 网站建设
· 网站优化
· 网络营销
· 常见问题
· 建站教程
· 热门话题
 
· 公司介绍
· 新闻动态
· 我们的优势
· 付款方式
· 联系我们
 
在线客服