<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>胡戈戈 &#187; CSS</title> <atom:link href="http://hugege.com/tag/css/feed/" rel="self" type="application/rss+xml" /><link>http://hugege.com</link> <description>网上吹水记录  hugege.com</description> <lastBuildDate>Sun, 06 Nov 2011 05:10:30 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.2</generator> <item><title>CSS3圆角属性在Firefox,Chrome,Safari的实现</title><link>http://hugege.com/2008/11/09/css3-firefox-chrome-safari/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=css3-firefox-chrome-safari</link> <comments>http://hugege.com/2008/11/09/css3-firefox-chrome-safari/#comments</comments> <pubDate>Sat, 08 Nov 2008 18:51:35 +0000</pubDate> <dc:creator>胡戈戈</dc:creator> <category><![CDATA[CSS]]></category> <category><![CDATA[Firefox]]></category><guid isPermaLink="false">http://hugege.com/?p=178</guid> <description><![CDATA[今天在aw那里看到他的博客用了Firefox专有的圆角属性，另外WordPress的后台也使用了，于是我自己也就试一下来用了。目前IE还未支持圆角属性，IE8我还不清楚支不支持，或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆友的问题了，希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了，但他们也还是使用私有属性来实现，用法上略有区别。 先说一下Firefox的圆角属性： -moz-border-radius: {1,4} &#124; inherit 如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px; 也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。 也可以用合并起来一起设置，如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0; 对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。 -webkit-border-radius：{1,2} &#124; inherit; 如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px; 如果是单独设置四个角的话，需要采取这种方式 -webkit-border-top-left-radius:5px 10px; -webkit-border-top-right-radius:5px 10px; -webkit-border-bottom-right-radius:5px 10px; -webkit-border-bottom-left-radius:5px 10px; 如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。 著名皮肤制作人utom总结了圆角属性不同浏览器下的运用 -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 更多详细的请大家自己查看以下链接： mozilla 和webkit的 CSS圆角 https://developer.mozilla.org/en/CSS/-moz-border-radius apple_ref/doc/uid/TP30001266&#8211;webkit-border-bottom-left-radius Hugege.com by 胡戈戈 Copyright © 2008 爱祖国,爱人民,唉派对。 更多精彩欢迎您订阅http://feed.hugege.com GegeHost稳定便宜的美国主机,论坛推荐:美国主机论坛]]></description> <content:encoded><![CDATA[<p>今天在aw那里看到他的博客用了Firefox专有的圆角属性，另外WordPress的后台也使用了，于是我自己也就试一下来用了。目前IE还未支持圆角属性，IE8我还不清楚支不支持，或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆友的问题了，希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了，但他们也还是使用私有属性来实现，用法上略有区别。</p><p><strong>先说一下Firefox的圆角属性：</strong><br /> -moz-border-radius: {1,4} | inherit<br /> 如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px;<br /> 也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。<br /> 也可以用合并起来一起设置，如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;</p><p><strong>对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。</strong><br /> -webkit-border-radius：{1,2} | inherit;<br /> 如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px;<br /> 如果是单独设置四个角的话，需要采取这种方式</p><blockquote><p>-webkit-border-top-left-radius:5px 10px;<br /> -webkit-border-top-right-radius:5px 10px;<br /> -webkit-border-bottom-right-radius:5px 10px;<br /> -webkit-border-bottom-left-radius:5px 10px;</p></blockquote><p>如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;<strong>使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。</strong></p><p><strong>著名皮肤制作人<a href="http://utombox.com/new-lastfm/">utom</a>总结了圆角属性不同浏览器下的运用</strong></p><blockquote><p>-moz-border-radius: 5px;<br /> -khtml-border-radius: 5px;<br /> -webkit-border-radius: 5px;<br /> border-radius: 5px;</p></blockquote><p>更多详细的请大家自己查看以下链接：<br /> <a href="http://weibin.org/html/moz-border-radius-webkit-border-radius_28.html">mozilla 和webkit的 CSS圆角</a><br /> <a href="https://developer.mozilla.org/en/CSS/-moz-border-radius"> https://developer.mozilla.org/en/CSS/-moz-border-radius</a><br /> <a href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-bottom-left-radius"> apple_ref/doc/uid/TP30001266&#8211;webkit-border-bottom-left-radius</a></p><p><a href="http://hugege.com/" target="_blank">Hugege.com</a> by 胡戈戈 Copyright ©  2008 爱祖国,爱人民,唉派对。<br /> 更多精彩欢迎您订阅<a href="http://feed.hugege.com" target="_blank">http://feed.hugege.com</a><br/> <a href="http://www.gegehost.com/" target="_blank">GegeHost稳定便宜的美国主机</a>,论坛推荐:<a href="http://ushost.me/" target="_blank">美国主机论坛</a></p> ]]></content:encoded> <wfw:commentRss>http://hugege.com/2008/11/09/css3-firefox-chrome-safari/feed/</wfw:commentRss> <slash:comments>30</slash:comments> </item> <item><title>终于换上了自己的皮</title><link>http://hugege.com/2008/09/18/change-skin/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=change-skin</link> <comments>http://hugege.com/2008/09/18/change-skin/#comments</comments> <pubDate>Wed, 17 Sep 2008 18:14:57 +0000</pubDate> <dc:creator>胡戈戈</dc:creator> <category><![CDATA[吹水]]></category> <category><![CDATA[CSS]]></category><guid isPermaLink="false">http://hugege.com/?p=155</guid> <description><![CDATA[科技如此之强大，我利用Sandbox和Firebug就可以打造一个主题了，作为菜鸟的我，虽然稍微懂得一点CSS但我也是属于登不了大雅之堂的那种类型的，就只能自己一个人玩玩。我都还没来的急去翻阅什么资料，咨询什么高手，专业人士，一个没有图片，仅有CSS和PHP代码的主题东东就这样子出来了。前两天我也是利用Firebug将河蟹娱乐的版面改宽了，看来我以后应该多动手，很多问题都不是想象中的那么难。 现在这个主题的问题应该还有很多，我就慢慢改，慢慢请教高人，慢慢简化优化代码，将代码搞的规范些，当然这一切纯属实验室的作品。我有空我就多玩玩，看看哪里还能改进的，一点一点地改。虽然我也会PS而且也特别喜欢PS，但我始终相信依靠单纯的CSS，不需要图片也是成打造一个很漂亮的主题的。现在终于有了自己的皮了，兴奋之情不言而喻。大家帮忙看看还有什么问题，都大声地指出来，大声地骂出来。 我以前看关于CSS的书是很多了，可是一直没有实践，所以将很多知识都给忘记了，而且理解一点都不深刻，学校这个鸟东西只会教邓论，毛概，马列这种垃圾迷信的东西，什么事情最主要都是要靠自己。我在暑假时看完了一本PHP的书，书本上的例子我也都是照着在电脑上打，测试通过的。最近我在看《JavaScript权威指南第五版》，这本书相当的牛，不过我还没上机测试过，知识点感觉有点难，而且依然很厚，实践依然是最重要的。 据网友报道，在IE6下侧边栏跑到下面去了，这个要怎么找回来呢，各位大大？ 我已经安装了IETester,据网友最新消息，在IE6下上面的那条灰色条纹不见，这个不知道被什么东西遮住了。 另外一个就是如何设置&#8221;Tab&#8221;的顺序呢，因为有网友在使用&#8221;Tab&#8221;键时，发现顺序似乎乱了。 另外发现在IE8下的评论表单的每个input框里面的文字被限制在了很小的范围之内，还需要拖动，不知这个要怎么搞？ IE对于虚线的支持不是很好，当你一拖动时，有一小部分就会被聚成一些线段，这个要怎么改才能让它拖动时不产生这种情况呢？ 谁来告诉怎么删除sandbox那些冗余的代码？ 各位大大，赶快帮忙想想。另外再想想怎么可以让这个主题再美观些呢？ Hugege.com by 胡戈戈 Copyright © 2008 爱祖国,爱人民,唉派对。 更多精彩欢迎您订阅http://feed.hugege.com GegeHost稳定便宜的美国主机,论坛推荐:美国主机论坛]]></description> <content:encoded><![CDATA[<p><img src="http://farm4.static.flickr.com/3161/2865239557_66101a3294_o.png" alt="screenshot" width="300" height="225" align="right" />科技如此之强大，我利用Sandbox和Firebug就可以打造一个主题了，作为菜鸟的我，虽然稍微懂得一点CSS但我也是属于登不了大雅之堂的那种类型的，就只能自己一个人玩玩。我都还没来的急去翻阅什么资料，咨询什么高手，专业人士，一个没有图片，仅有CSS和PHP代码的主题东东就这样子出来了。前两天我也是利用Firebug将河蟹娱乐的版面改宽了，看来我以后应该多动手，很多问题都不是想象中的那么难。</p><p>现在这个主题的问题应该还有很多，我就慢慢改，慢慢请教高人，慢慢简化优化代码，将代码搞的规范些，当然这一切纯属实验室的作品。我有空我就多玩玩，看看哪里还能改进的，一点一点地改。虽然我也会PS而且也特别喜欢PS，但我始终相信依靠单纯的CSS，不需要图片也是成打造一个很漂亮的主题的。现在终于有了自己的皮了，兴奋之情不言而喻。大家帮忙看看还有什么问题，都大声地指出来，大声地骂出来。</p><p>我以前看关于CSS的书是很多了，可是一直没有实践，所以将很多知识都给忘记了，而且理解一点都不深刻，学校这个鸟东西只会教邓论，毛概，马列这种垃圾迷信的东西，什么事情最主要都是要靠自己。我在暑假时看完了一本PHP的书，书本上的例子我也都是照着在电脑上打，测试通过的。最近我在看《JavaScript权威指南第五版》，这本书相当的牛，不过我还没上机测试过，知识点感觉有点难，而且依然很厚，实践依然是最重要的。</p><p><del datetime="2008-09-18T02:42:15+00:00">据网友报道，在IE6下侧边栏跑到下面去了，这个要怎么找回来呢，各位大大？</del><br /> <del datetime="2008-09-18T09:23:27+00:00">我已经安装了IETester,据网友最新消息，在IE6下上面的那条灰色条纹不见，这个不知道被什么东西遮住了。</del><br /> <del datetime="2008-09-18T03:30:37+00:00">另外一个就是如何设置&#8221;Tab&#8221;的顺序呢，因为有网友在使用&#8221;Tab&#8221;键时，发现顺序似乎乱了。</del><br /> 另外发现在IE8下的评论表单的每个input框里面的文字被限制在了很小的范围之内，还需要拖动，不知这个要怎么搞？<br /> IE对于虚线的支持不是很好，当你一拖动时，有一小部分就会被聚成一些线段，这个要怎么改才能让它拖动时不产生这种情况呢？<br /> 谁来告诉怎么删除sandbox那些冗余的代码？<br /> 各位大大，赶快帮忙想想。另外再想想怎么可以让这个主题再美观些呢？</p><p><a href="http://hugege.com/" target="_blank">Hugege.com</a> by 胡戈戈 Copyright ©  2008 爱祖国,爱人民,唉派对。<br /> 更多精彩欢迎您订阅<a href="http://feed.hugege.com" target="_blank">http://feed.hugege.com</a><br/> <a href="http://www.gegehost.com/" target="_blank">GegeHost稳定便宜的美国主机</a>,论坛推荐:<a href="http://ushost.me/" target="_blank">美国主机论坛</a></p> ]]></content:encoded> <wfw:commentRss>http://hugege.com/2008/09/18/change-skin/feed/</wfw:commentRss> <slash:comments>29</slash:comments> </item> </channel> </rss>
