Badst' weblog

总结 CSS3的各种效果太炫了，和几年前相比省了不知道多少功夫，一些简单的效果再也不要用图片了。 记得之前做的那个阳明的网站，一个透明效果搞到半死:( 有用的效果代码：（因标准不统一，各大浏览器有所不同，Firefox代码前加“-moz-”，Chrom/Safari代码前加“-webkit-” border-radius 圆角效果值越大圆的半径越大。 box-shadow 盒子阴影。可同时定义很多个，在中间以逗号分开“,”详见：CSS3属性Box-shadow text-shadow 文字阴影。详见：CSS3:文字阴影知多少 background 滑动门技术，一个图片，多个用途。通过控制背景的位置得到不同的显示结果。 CSS3里还能同时定义多个图片，以“,”分割，IE8目前都不支持这样的写法。

CSS3中新增的3个边框效果，圆角边框，边框阴影，边框图片。 border-radius box-shadow border-image 浏览器支持情况： 前两个效果所有浏览器均以统一标准支持，border-image针对不同浏览器需增加专有代码： Firefox: -moz- Opera: -o- Safari/Chrom: -webkit- 目前最新的IE9不支持border-image   border-radius border-radius:25px; 其中的px可以改为%（整体box长宽的百分比）或em（内容字体大小的倍数比例） 如果为100%那就是一个整圆了。 定义四个角不同的值可以写成 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 简化写法，与margin同理，从topleft开始顺时针旋转。 border-radius:上左 上右 下左 下右 border-radius:上左下右 上右下左 border-radius:上左 上右下左 下右   box-shadow box-shadow: x偏移 y偏移 阴影扩散半径 阴影颜色 不可使用%单位，可使用px,pt,em 如阴影扩散半径省略则默认为0，——> CSS3属性Box-shadow   border-image border-image:url() 缩放x 缩放y round/stretch round:平铺 stretch:拉伸 确实不好解释，看w3school的演示吧。 这个很不好用，必须定义border-width，但这样又拉宽了整个盒子的大小。 但确实激发了不少创作的可能。 参考：http://www.w3schools.com/css3/css3_borders.asp

这是一个非常基础的属性了，但是能实际用好还是很需要经验的。 display属性非常多，多到记不住，仔细想想比较常用的也只有： block 块状，可以定义宽度高度等。 inline 并排，结尾不换行，常用来定义菜单横向排列。 none 完全隐藏。 但前几天一直在blueidea看到一个家伙发的帖子，让用div实现一个表格的效果，一个左边一栏右边两行的表格。 就想到前阵子搞的那个失败了的主题，因为评论的Ajax效果出错放弃了，那评论的样式可是花费了我不少心思。 于是乎想到似乎那里有实现过这个效果。于是翻来随便简化了下，果然可以了。 看那代码，关键两个字： 外面的DIV，display: table 里面的DIV，display: table-cell 演示页面：div-table —— 原来是ol/li的排版，我给改成了DIV的。

第一个字体写英文字体，然后第二个紧跟着中文字体。 font-family: Arial, ‘Microsoft YaHei’, Verdana, Sans-Serif; 这种方法Chrome支持，IE貌似支持的不好。已经确认IE无法支持。速度把CSS改回来。 IE会先用Arial的字体套在中文上，发现没效果，就用了默认的宋体！ 目前没有解决办法，暂时全用雅黑吧。 例： text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.

定义和用法 text-transform 属性控制文本的大小写。 说明 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。 lowercase定义无大写字母，仅有小写字母。 值 描述 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 http://www.w3school.com.cn/css/pr_text_text-transform.asp

RT 打击太大了！盒子模型完全错了。。肿麽办？？ 应该是那个clearfix的问题，IE不支持吧？！ 这是之前在IE下的效果图： 顶部导航条menu的背景图片没有了，而且被下面的content紧追在尾巴后面，再后面的sidebar被挤到页面尾巴上去了。 试着仿照paragon重新布局，一点效果都没。 在几经周折终于在网上到到一段神奇的代码。修复了这个BUG。 在menu里面的ul里加上overflow:auto; IE效果OK了。但是，在Chrome里看，menu最右边出现了滚动条= =!!  蛋又碎了一地。 overflow还有是属性呢？改成overflow:hidden;，成功！

完全偷paragon的样式，Google Chrome的审查元素功能太好用了。。 comments.php里死活找不到样式在哪改的？搜了下 <?php wp_list_comments(‘type=comment&callback=mytheme_comment’); ?> 这个函数，才找到WordPress官方codex说明里的用法。原来样式是在function.php里面，果断改掉了。 You will need to define your custom callback function in your theme’s functions.php file. Here is an example: 上一篇/下一篇中的圆角方块效果 #artical ul.prevnext a { color: gainsboro; text-shadow: #191919 1px 1px 0; background: url(“images/pagination_bg.png”) repeat-x; padding: 6px 11px; font-size: 0.9em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 1px 1px 3px [...]

很诡异文章发表的是<code>包含着<ol>，但实际结果却倒过来。只好重新编辑css。 在HTML编辑里，<code>后面回车再接<ol>才可以。。

只加了style.css，header，index，footer。其他的是扒别人的，还没做细致修改。 桂林山水的顶部背景，整体灰黑马赛克背景，主内容和side的分割背景，每篇文章的背景。 而且每篇文章都是用列表<li>来表示的而不是<div> 文章内容里的<li>标签还要重新定义一下。   发现box的宽度问题有了一个很好的解决办法。 IE的宽度是包括了margin,broder,padding的，这是公认的一个BUG，但这也不是没有好处，好处就是定下一个宽度后，不论margin,broder,padding的属性怎么变，整个的宽度不会变，变的只是最里面的内容的宽度。 现在的新一代浏览器都会正常显示了，但在设定一个宽度后，如果padding增加，那总宽度就增大了，不得不再调整这个宽度。解决方法就是：再套一个DIV，然后设这个DIV的padding。比如用.section。 整个网站都可以用这种方法实现15px的padding效果，15px是个很舒服的值。

在仿制Paragon的风格时确实遇到这个问题。 以#main定义主内容页面的背景图片。高度根据#container和#sidebar-second的高度自适应。 方法一： 一个神奇的class,在名为clearfix层的最下方产生一个高度为0的空格。IE8暂不支持。 .clearfix::after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } IE则需要手动加代码 <div style="font: 0px/0px sans-serif;clear: both;display: block"></div> 方法二： 要实现自适应高度，div层必须具有float属性，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被 移动位置了。 最外层#mainfather: margin:0 auto; 内层#main: background: red;float:left; 相比较来说，这个方法更简单和稳定。 代码测试：http://www.blueidea.com/tech/web/2006/3210.asp 参考来源：http://www.syscy.com/articleview/2009-3-22/article_view_707.htm