代码示例

椭圆

自适应椭圆

用百分比定义border-radius的值。

div {
  border-radius: 50%;
}

半个椭圆

分别定义：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

或用border-radius的缩写：左上 右上 右下 左下。

代码示例

边框

半透明边框

• 使用 rgba 或 hsla 格式的颜色生成半透明效果
• 但是，会有问题……

div {
  // 白色背景和白色半透明边框重叠在一起！
  background: white;
  border: 10px dashed rgba(255, 255, 255, 0.5);
}

解决方案：修改background-clip属性。

• border-box（默认）
• padding-box（留出边框）

div {
  background-clip: padding-box;
}

代码示例

尽可能减少重复代码

不要写死

以下是一个正常的button样式，看似完美地实现了设计稿。

button {
  background: salmon linear-gradient(lightSalmon, salmon);
  border: 1px solid indianRed;
  border-radius: 4px;
  box-shadow: 0 1px 5px salmon;
  color: white;
  font-size: 20px;
  line-height: 30px;
  padding: 6px 16px;
  text-shadow: 0 -1px 1px fireBrick;
}

然则问题在于：当修改字体的时候，行高也要同时修改。padding和border-radius也变得不合时宜。

原则：如果有相互依赖的值，尽量在代码中体现出他们的关系。

纹饰

兽面纹

以鼻梁为中线，两侧作对称排列，上端第一道是角，角下有目，形象比较具体的兽面纹在目上还有眉，目的两侧有的有耳，多数兽面纹有曲张的爪，两侧有左右展开的体躯或兽尾，少数简略形式的没有兽的体部或尾部。

突出的角型是区别各类兽面纹的主要标志：

• 环柱角型
• 牛角型
• 外卷角型
• 羊角型
• 内卷角型
• 曲折角型
• 龙角型
• 长颈鹿角型
• 虎头型
• 熊头型
• 龙蛇集群型

一、兵器

1. 戈

• 商周时期兵器中最常见的一种
• 古称勾兵，是用以钩杀的兵器

结构

• 戈头
  • 援：长条形锋刃部分
  • 内：连接援的插入戈柲的部分
  • 胡：靠近柲的下端延长的部分，其上有穿，以用皮索固住于柲上
  • 阑：在援紧贴柲的部分上下的短柱形突出，使戈头牢缚于柲上
• 柲
• 柲冒
• 鐏

形制

• 直内戈
• 曲内戈
• 銎内戈
• 三角援戈
• 条形短胡戈
• 圭援戈
• 短援阔内戈
• 狭援长胡戈
• 内刃戈