<?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>FoxLing - 前端开发 &#187; CSS3</title>
	<atom:link href="http://foxling.org/tag/css3/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[CSS3]多背景图片设置 &#8211; multiple-backgrounds</title>
		<link>http://foxling.org/html-css-xml/css3-multiple-backgrounds/</link>
		<comments>http://foxling.org/html-css-xml/css3-multiple-backgrounds/#comments</comments>
		<pubDate>Wed, 22 Oct 2008 15:52:09 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[HTML/CSS/XML]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[multiple-backgrounds]]></category>
		<category><![CDATA[多背景]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/multiple-backgrounds/</guid>
		<description><![CDATA[一个宽为400px的自适应高度的BOX，在Safari下浏览哦（目前只有Safari支持该属性） Demo:/examples/multiple-backgrounds.html background-image: w1,…wM, w1,…wM, w1,… /* N values */ background-repeat: x1,…xR, x1,…xR, x1,… /* N values */ background-size: y1,…yS, y1,…yS, y1,… /* N values */ background-position: s1,…rP, s1,…rP,… /* N values */ 你可以这么写： background: url(images/multiple_bg.png) left top no-repeat, url(images/multiple_bg.png) -400px bottom no-repeat, url(images/multiple_bg.png) -800px top repeat-y; 也可以这么写： background-image: url(images/multiple_bg.png), url(images/multiple_bg.png), url(images/multiple_bg.png); background-position: left top, [...]]]></description>
			<content:encoded><![CDATA[<p>一个宽为400px的自适应高度的BOX，在Safari下浏览哦（目前只有Safari支持该属性）<br />
<a target="_blank" href="/examples/multiple-backgrounds.html">Demo:/examples/multiple-backgrounds.html</a></p>
<pre>
background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP,… /* N values */ </pre>
<p>你可以这么写：</p>
<pre>
background: url(images/multiple_bg.png) left top no-repeat,
url(images/multiple_bg.png) -400px bottom no-repeat,
url(images/multiple_bg.png) -800px top repeat-y;
</pre>
<p>也可以这么写：</p>
<pre>
background-image: url(images/multiple_bg.png), url(images/multiple_bg.png), url(images/multiple_bg.png);
background-position: left top, -400px bottom, -800px top;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/html-css-xml/css3-multiple-backgrounds/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS3的background-clip和background-origin</title>
		<link>http://foxling.org/html-css-xml/css3-background-clip-and-background-origin/</link>
		<comments>http://foxling.org/html-css-xml/css3-background-clip-and-background-origin/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 12:55:51 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[HTML/CSS/XML]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[背景定位]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/background-clip-and-background-origin/</guid>
		<description><![CDATA[background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。 background-clip: [border &#124; padding] [, [border &#124; padding]] background-origin: [border &#124; padding &#124; content] [, [border &#124; padding &#124; content]] 对于 background-clip： 如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 [...]]]></description>
			<content:encoded><![CDATA[<p>background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。</p>
<p>background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。</p>
<p><img src="/attachments/month_0810/a20081021211147.png" border="0" alt=""/></p>
<pre>
background-clip: [border | padding] [, [border | padding]]
background-origin: [border | padding | content] [, [border | padding | content]]
</pre>
<p>对于 background-clip：<br />
如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。</p>
<p>对于 background-origin：<br />
如果是 padding 值，则 position 相对于 padding 边缘（&#34;0 0&#34; 为 padding 边缘的左上角，而 &#34;100% 100%&#34; 为右下角）。如果是 border 值，则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同，多个值也用逗号分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 &#34;top left&#34;（默认初始值），则背景图左上角将会被截取掉部分。</p>
<p>这两个属性仅从 CSS3 才出现，在未使用该属性 background module 中的默认表现又如何呢？</p>
<p>background-clip 默认类似于 background-clip:border。<br />
background-origin 默认类似于 background-origin:padding。</p>
<p>但 IE 又是特例 （It sucks）。</p>
<p>在 IE6 、IE7 中，一般元素（button 等除外）的背景相当于：background-clip:border; ackground-origin:border;<br />
而 hasLayout 的元素（加上 button 等）的背景则相当于：background-clip:padding; background-origin:padding;</p>
<p>这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现，不过都是通过其私有属性的表达方式。</p>
<blockquote><p>基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始，-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的，-khtml- 是以 KHTML 为引擎的浏览器（如 Konqueror Safari）、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器（如Firefox，Mozilla）、-webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生产品）的浏览器（如 Safari、Swift）。</p>
<p>即支持的私有属性分别为：</p>
<p>moz-background-clip<br />
webkit-background-clip<br />
khtml-background-clip<br />
moz-background-origin<br />
webkit-background-origin<br />
khtml-background-origin</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/html-css-xml/css3-background-clip-and-background-origin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS圆角效果</title>
		<link>http://foxling.org/html-css-xml/css-border-radius/</link>
		<comments>http://foxling.org/html-css-xml/css-border-radius/#comments</comments>
		<pubDate>Thu, 14 Aug 2008 22:06:02 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[HTML/CSS/XML]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[圆角]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/21/</guid>
		<description><![CDATA[标题党， 其实我想说，我不会去用CSS实现圆角的，没那个需求也没那个必要，用图片的背景的话，在结构上更清晰有条理了。 在FF和Chrome里可以用CSS3的属性，搞定圆角，爽~ 代码也更简洁，何乐而不为。 因为目前CSS3还未正式定下来，所以，都是通过私有属性来进行设置： FireFox: -moz-border-radius:8px; Chrome,Safari -webkit-border-radius:8px;]]></description>
			<content:encoded><![CDATA[<p><img src="/attachments/month_0808/7200881817959.jpg" border="0" alt=""/></p>
<p>标题党，<br />
其实我想说，我不会去用CSS实现圆角的，没那个需求也没那个必要，用图片的背景的话，在结构上更清晰有条理了。<br />
在FF和Chrome里可以用CSS3的属性，搞定圆角，爽~<br />
代码也更简洁，何乐而不为。</p>
<p>因为目前CSS3还未正式定下来，所以，都是通过私有属性来进行设置：<br />
FireFox:<br />
<code>-moz-border-radius:8px;</code></p>
<p>Chrome,Safari<br />
<code>-webkit-border-radius:8px;</code></p>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/html-css-xml/css-border-radius/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

