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

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

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

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

在第一个图中, 说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的标准推进是比较慢的, 所以 等今后标准创建好了, 再取消前缀...

css1-css3的那些模糊点的更多相关文章

  1. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  2. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  3. CSS3总结三：文字（text）/字体、文本、文本装饰、多列

    Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-col ...

  4. 本周推荐7款CSS3实现的动态特效

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  5. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  6. css文本属性

    CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  7. HTML, CSS学习笔记（完整版）

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  8. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  9. 2019-4-26 css学习笔记

    CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言. CSS的作用:是定义网页外观(例如,字体.背景.文本.位置.布局 ...

  10. jQuery 运行机制

    1.Selector,查找元素.这个查找不但包含基于CSS1~CSS3的CSS Selector功能,还包含其对直接查找或间接查找而扩展的一些功能. 2.Dom元素的属性操作.Dom元素可以看作htm ...

随机推荐

  1. C++IO关于cin>>和getline的理解

    这个问题困扰了我有一段时间了,趁着十一放假有时间,仔细研究了一下 首先来看一下输入输出运算符cin>>的构成:cin和>> cin>>是由两部分构成的,cin和&g ...

  2. BZOJ3295 [Cqoi2011]动态逆序对

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. XCode显示iOS Simulators时不显示系统版本号并出现Identifier(UUID)

    如果出现如下的显示问题,说明你添加了多个相同系统版本的iOS Simulators: 打开Windows->Devices,查看已经出现了相同版本的模拟器: 那么我们删除一些相同的模拟器,即可解 ...

  4. SQLChop、SQLWall(Druid)、PHP Syntax Parser Analysis

    catalog . introduction . sqlchop sourcecode analysis . SQLWall(Druid) . PHP Syntax Parser . SQL Pars ...

  5. linux下制作win7安装盘（mint、ubuntu、debian）

    今天替同事装系统.因为现在的debian系系统都可以直接用dd拷贝iso到u盘的方法进行安装,所以,想当然的用dd来制作windows安装盘.没反应!所以有了下面的方法. 1. 将u盘格式化为ntfs ...

  6. Android中定时执行任务的3种实现方法

    在Android开发中,定时执行任务的3种实现方法: 一.采用Handler与线程的sleep(long)方法(不建议使用,java的实现方式)二.采用Handler的postDelayed(Runn ...

  7. 构建第一个maven工程

    一.maven介绍 Maven 是一个强大的项目管理和构建自动化工具,它通过抽象的项目对象模型和构建生命周期模型来对项目及其构建过程进行管理,Maven 最大化的消除了构建的重复,提升了构建的效率与标 ...

  8. Java线程池的那些事

    熟悉java多线程的朋友一定十分了解java的线程池,jdk中的核心实现类为java.util.concurrent.ThreadPoolExecutor.大家可能了解到它的原理,甚至看过它的源码:但 ...

  9. 屠蛟之路_乘风破浪_FifthDay

    乘风破浪 一艘大船 (我们写的几千行代码) 一片汪洋 (软工耗费的时间) 一群骚年 (一不小心就火了) 为救一位公主 (吃自助餐) 选择去跋山涉水,乘风破浪(解决bug,解决冲突) 毫不畏惧 (韧性) ...

  10. Mysql学习笔记（三）对表数据的增删改查。

    正文内容. 这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mys ...