css1-css3的那些模糊点

css很重要, 但也不是万能的, 也不能抛弃dom 元素和 元素的属性!! 很多时候, dom "元素" 的 "属性" 也很重要 也很实用! 要结合属性来写

包括很多的html 元素标签, 也不能弃而不用, 只用div, p span等还是不行的!!

在css中和dom属性的写法: 只说标准的: css中单词和单词的连接用 - , 不用下划线 _ , dom元素的属性一般用双引号.

css的颜色, 可以用三个字符来表示, css是支持 颜色的 简写 的! 但是html中 , 关于属性颜色, 是不能简写的, 必须写完整.

821299-20160922083426246-1127239360.png

821299-20160922084910668-401204246.png

在第一个图中, 说default: not specified, 说没有设置, 其实就是: background设为transparent, 其实就是它的 默认背景颜色

  1. 通常情况下, 设置与不设置都没有关系/没有区别;
  2. 但是, 有两种情况, 需要设置, 一是当两个重叠的div, 想要显示被隐藏的下面的那个div, 就要 (用代码) 把上面那个div的背景颜色设为透明;
  3. 第二种情况是: 要设置某些边框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的样式...

-webkit... 和 -moz-box-shadow 成为浏览器的 私有 前缀, 表示的是 厂商自己先实现某些功能样式, 而w3c的标准推进是比较慢的, 所以 等今后标准创建好了, 再取消前缀...

转载于:https://www.cnblogs.com/bkylee/p/5894910.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页