杰晶网络

网页设计应该熟知的CSS 3.0技术
网页制作 2024/12/28 佚名
3 2

1. 基本的xhtml标记

网页设计应该熟知的CSS 3.0技术

在开始这个教程之前，让我们来做点xHtml标记，我们需要的几个DIV来完成效果的显示，如下：

  • #round, 这个显示CSS 3圆角
  • #indie, 单个角的显示
  • #opacity, 不透明度
  • #shadow, 不用制图工具制作投影
  • #resize, 可调节大小

因此，我会的xHtml会像下面这样，你可以自己建立一个html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="round"> </div>
<div id="indie"> </div>
<div id="opacity"> </div>
<div id="shadow"> </div>
<div id="resize">
<img src="image.jpg" alt="resizable image" width="200" height="200">
</div>
</div>
</body>
</html>

让我们来稍微重设一下浏览器的CSS（还刻CSS reset吗? 可以看10款浏览器CSS Reset的方法），代码如下：

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/*稍后我们把要实现的代码写在这里*/

2. CSS3 圆角

网页设计应该熟知的CSS 3.0技术

如上面所说，我们的代码会是这样的：

#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

在这里-moz是firefox上能显示的样式前缀，而-webkit刚是像safari/Chrome这样的浏览器的样式前缀。而10px刚是border的半径（radius : ['reidjəs] n. 半径），明白了吧！

3. 单独圆角的定义

网页设计应该熟知的CSS 3.0技术

看了上面的CSS圆角，你可能会觉得，如果我想让它只显示两个三个圆角，需要怎么办呢，难道还是要用到制图工具? 当然不用，CSS3已经为我们想好了。这里，我们的代码将是：

#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}

注意到topright和top-left这两个值没有? 这表明的是圆角的方位，完整的方位书写出下：

  • 以-moz为前缀的：topleft topright bottomleft bottomright
  • 以-webkit为前缀的：top-left top-right bottom-left bottom-right

而且，你注意到了没，-moz为前缀的，是写在最后，而以-webkit前缀的，写在半径的前面。

4. 显示不透明度

网页设计应该熟知的CSS 3.0技术

搞过透明没有， 很难搞，是不是？对，就是难搞，特别是IE(友情推荐:让IE支持PNG透明的最好方法)。而CSS3只要一行代码。如果浏览器都支持CSS 3，事情就好办多了。我们的代码如下：

#opacity {
background-color: #000;
opacity: 0.3;
}

再来一次英文解释吧，opacity，就是不透明度的意思。我想，只要知道这个，你就会用了吧?

5. CSS 投影

网页设计应该熟知的CSS 3.0技术

你可能知道如何用CSS技巧来实现投影吧? 不过，这里要说的不是技巧，而是CSS 3的一个技术，看代码：

#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

看到没，-webkit这一行，只要这一行。3px表示水平方向的投影，5px表示纵向投影，而10px而指模糊的跨度（使用过fireworks或者photoshop的feather功能没有? 对，就是这个!）。而且，像你看到的，-webkit为前缀，证明只有safari和chrome这样的浏览器才会显示，firefox则不会。

6. 调节大小

网页设计应该熟知的CSS 3.0技术

用过safari的人都知道，一般情况下，textarea部分是可以调节大小的，就是这样。不过，这个功能现在也暂时只支持safari。代码如下：

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}

resize:both。像clear:both一样。表示，可以向水平方向和纵方向选择拖动，调节大小。当然，也支持下面的值：

  • resize:horizontal; 水平方向调作
  • resize:vertical; 纵向调节

而另一个要让你明白的是，你必须把overflow:auto;写上，才能保证Resize正常使用。当然，你还可以设定最长宽度，最低高度来让这个元素在可一个范围内可调节，知道下面这个不?

  • max-height: 123px;
  • min-height: 321px;
  • max-width: 123px;
  • min-width: 321px;

不懂? 那你可以回去学一下CSS啦，虽然IE6这个曾经的伟大过的浏览器不支持这个属性（可用JS来hack它）。这可是很重要的哦!

你有没有一边看，一边跟着做呢? 如果没有，建议你做一次。像你知道的，代码这东西，看着，以为懂了，到了用的时候，可能会不知道如何下手用。自己动手，会让你发现更多问题，会让你有更多的进步，而不是单纯看。anyway，这个还是提供出来：

提示：您可以先修改部分代码再运行

标签：
CSS3,技术
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“网页设计应该熟知的CSS 3.0技术”
暂无“网页设计应该熟知的CSS 3.0技术”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/12/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网