CSS3阴影 box-shadow的使用和技巧总结

CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选。如不设值,默认投影方式是外阴影;...

html+css模拟单选框

html+css模拟单选框
html+css模拟单选框   <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> i{ border: 3px solid #ff9300; border-radius: 15px; display: block; margin: 100px; padding: 4px; text-align: center; width: ...

双飞翼布局(圣杯布局)介绍-始于淘宝UED

双飞翼布局(圣杯布局)介绍-始于淘宝UED
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案。 尝试之路考虑以下DOM结构: [html] view plaincopy <div id="page">       <div id="hd"></div>          <div id="bd">              ...

纯CSS实现三角形,圆形,菱形……

纯CSS实现三角形,圆形,菱形……
纯CSS实现三角形,圆形,菱形…… <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .triangle{ border-color: red white white white; border-style: solid; border-width: 10px...

高度自适应

高度自适应
高度自适应   <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度自适应布局</title> <style> body{ padding:0; margin:0; color:#f00;} .container{ margin:0 auto; width:600px; border:3px solid #00C; overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/ } .left{ float:left; width:150px; background:#B0B0B0; paddin...

切图练习以备以后修改

切图练习以备以后修改
图片:http://www.siyuweb.com/qietu/hanneng.png 案例:http://www.siyuweb.com/qietu/hanneng/index.html 参考: http://www.hanergy.com/ 图片:http://www.siyuweb.com/qietu/batie02.jpg 案例: http://www.siyuweb.com/qietu/batie02/index.html 图片:http://www.siyuweb.com/qietu/batie03.jpg 案例: http://www.siyuweb.com/qietu/batie03/index.html

手机页面上的图片尺寸要如何确定?

手机页面上的图片尺寸要如何确定?
手机分辨率是640960,但页面渲染下来的实际像素是320480。 但是页面设计稿是基于640*960做的,这样页面的一张切图就会是400实际像素宽,放在页面上大于了手机能否渲染出来的页面。 那么,这种页面在切图的时候,是否说是应该将设计稿的尺寸/2? 还是说应该把图片按比例强制为页面实际像素宽度? 貌似这两种情况都不太适合啊   http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html htt...

将图片的说明显示在图片之上且背景半透明效果

将图片的说明显示在图片之上且背景半透明效果
1.给文字增加绝对定位 <style type="text/css"> body { text-align: center; font-family:Verdana; font-size:14px; } .img-demo { position: relative; display: block; height:500px; width: 335px; margin: 0 auto; } .img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 335px; pad...

css初始化代码

css初始化代码
/* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%...
Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录