css1-css3的那些模糊点
css很重要, 但也不是万能的, 也不能抛弃dom 元素和 元素的属性!! 很多时候, dom "元素" 的 "属性" 也很重要 也很实用! 要结合属性来写
包括很多的html 元素标签, 也不能弃而不用, 只用div, p span等还是不行的!!
在css中和dom属性的写法: 只说标准的: css中单词和单词的连接用 - , 不用下划线 _ , dom元素的属性一般用双引号.
css的颜色, 可以用三个字符来表示, css是支持 颜色的 简写 的! 但是html中 , 关于属性颜色, 是不能简写的, 必须写完整.
在第一个图中, 说default: not specified, 说没有设置, 其实就是: background设为transparent, 其实就是它的 默认背景颜色
- 通常情况下, 设置与不设置都没有关系/没有区别;
- 但是, 有两种情况, 需要设置, 一是当两个重叠的div, 想要显示被隐藏的下面的那个div, 就要 (用代码) 把上面那个div的背景颜色设为透明;
- 第二种情况是: 要设置某些边框border的特殊(效果)样式时, 如inset, outset, groove, ridge时, 就可以设置边框的背景为透明...
注意: 边框颜色一般不设置为 "透明" , 那就显示不出边框了. 一般设置 inset, outset就可以了, 因为groove和ridge的效果跟inset同 和 outset基本相同.一般使用细线为1px就好了.
inset和outset的效果, 主要是 显示在 "右下"的边框线, 包括颜色, 一般 "左手"的边框线都不会变得.
要设置竖直细线, 可以使用边框和padding margin相结合. 这时只显示 border-right就好了..
推而广之, 以后凡是页面中 "!所有!" 的线: 边框 , 水平线, 竖直线, 分隔线, 分割线等等, 都可以通过 border-direction 加 padding来实现的!!
box-shadow,注意不是border-shadow,
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 5px 10px 5px #eaf;
实际上box-shadow的实现, 还是在后下方 再绘制了 一个矩形.
5px 10px表示 "阴影" 矩形 跟原来div box之间的水平和垂直 偏移;
5px 表示 阴影"逐渐过度的" 距离. 后面的颜色表示阴影的颜色.
不过 box-shadow 是css3的样式...
