CSS 属性被分为不同的类型,如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。对于初学者来说,需要熟悉并掌握这些属性。前面我们已经了解了30个CSS选择器，但是新的CSS3属性呢？为此小编也特意整理了10个你需要熟悉的CSS3属性，来我们一起了解下吧！

1. border-radius

很容易成为最流行的 CSS3 属性，border-radius是 CSS3 的旗舰属性。虽然许多设计师仍然害怕布局可能因浏览器而异，但像圆角这样的小步骤是吸引他们的简单方法！

具有讽刺意味的是，我们都完全同意为移动浏览器提供替代观看体验的想法。然而，奇怪的是，有些人在桌面浏览时感觉不一样。

border-radius: 4px;

Circles

有些读者可能不知道我们也可以用这个属性创建圆圈。您所要做的就是将半径设置为元素宽度或高度的一半。

border-radius: 50px;

而且，如果我们想找点乐子，我们还可以利用灵活框模型（在8 中详细介绍）将文本在圆圈内垂直和水平居中。它需要一些代码，但只是因为需要补偿各种供应商。

display: flex;
align-items: center;
justify-content: center;

2. box-shadow

接下来，我们有 ubiquitousbox-shadow，它允许您立即将深度应用到您的元素。只是不要对您设置的值太讨厌！

box-shadow: 1px 1px 3px 292929;

box-shadow接受四个参数：

• x offset
• y offset
• blur
• color of shadow

现在，许多人没有意识到您可以box-shadows一次申请多个。这可能会导致一些非常有趣的效果。例如，我们可以使用蓝色和绿色的阴影来放大每个阴影。

box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

Clever Shadows

通过对::before和::after伪类应用阴影，我们可以创建一些非常有趣的视角。这是一个可以帮助您入门的方法：

HTML

CSS

.box:after {
  content: "";
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
  height: 100px;
  bottom: 0;
}

3.text-shadow

与 类似box-shadow，它必须应用于文本，并且它接收相同的四个参数：

• x-offset
• y-offset
• blur
• color of shadow

h1 {
   text-shadow: 0 1px 0 white;
   color: 292929;
}

文字轮廓

同样，就像它的兄弟一样box-shadow，我们可以通过使用逗号作为分隔符来应用多个阴影。例如，假设我们要为文本创建轮廓效果。虽然webkit确实提供了stroke效果，但我们可以使用以下方法访问更多浏览器（虽然不是很漂亮）：

body { background: white; }
 
h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4.text-stroke

小心这种方法。这是一个非标准功能。该text-stroke属性还不是 CSS3 规范的一部分。但是，如果您使用-webkit-前缀，现在所有主要浏览器都支持它。

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

特征检测

我们如何为 Firefox 提供一组样式，为Safari或Chrome提供另一组样式？一种解决方案是使用特征检测。

通过特征检测，我们可以使用 JavaScript 来测试某个属性是否可用。如果不是，我们准备后备。

让我们回到这个