本文侧重把主题开发过程中所遇到的 Css 代码存放于此，这篇文章为无限期更新的对象，一旦有新的进展都会在这里发布更新，也是自己的一个自学过程的笔记和总结吧！

1. Css 父元素可以直接影响到子元素的属性，例如 opacity 的属性就直接影响到，要修正这个，就需要用到下面的写法：

   rgba(0,0,0,0.5)
   

2. 常用三角符号不必再用图片或者 svg ，而是利用边框属性就可以轻易实现，例子：

   border:10px solid transparent; border-top:10px solid #333;
   

   这样就实现了一个向下的三角形。同样道理，设置左边框颜色，则三角形向右；右边框颜色，三角形向左；下边框颜色，三角形向上；

3. Css Select 元素修改，折腾了一个晚上才修正过来的：

   select {
   color: rgba(0, 0, 0, 0.6);
   width: auto;
   height: 35px;
   font-size: 14px;
   line-height: 35px;
   padding: 0 40px 0 8px;
   border: 1px solid #fff;
   color: #2f3542;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   background-image: linear-gradient(45deg, transparent 50%, #2f3542 60%), linear-gradient(135deg, #2f3542 40%, transparent 50%);
   background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%, 100% 0, calc(100% - 32px) 6px;
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   box-sizing: border-box;
   outline: none;
   position: relative;
   }
   

4. 最近发现很多初学的朋友问关于网站设置高度的问题。其实，很多主题由可视化编辑器完成，而这种编辑只提供默认的排版布局功能，有的甚至局限了某些设置，虽然这些主题很方便操作，针对初学者，可以不会编码也能快速发布网站，往往这样形成了一种的依赖性。例如，高度、宽度、背景图像等等，只要查到了该位置的元素属性，再针对元素所属的 class 样式，用系统自带的额外 css 进行编写，外加上 !important 进行优先处理即可。

   .test {
   width:auto;
   height:auto;
   padding:20px;
   border:1px solid #ccc;
   }
   如果加上优先处理的话，直接覆盖线条颜色：
   .test {
   border:1px solid #ff0000 !important;
   }
   或者：
   .test {
   border-color:#ff0000 !important;
   }
   

   大家不妨试试，最好的学习方法请进入 w3school 进行，里面有即时的编辑器进行代码运行，可以即时看见代码运行的效果；

5. 在某个区域设置图片的尺寸为 100%, 可以设置图片的高宽都为自动，局限设置最大宽度和最大高度都为 100%；主元素如果设置了超出隐藏 overflow:hidden 的话，图片即使是 100% 也会自动裁剪掉边框部分，需要做的就是把图片的属性设置为 box-sizing:border-box。什么意思呢：box-sizing:border-box 其实就是图片所有区域包括如果设置了边框，总体大小尺寸都是 100%，如果不设置 box-sizing:border-box 的话，相对来说就会增加了设置了边框的宽度，从而尺寸有所改变。

   img { width:auto; height:auto; max-width:100%; max-height:100%; box-sizing:border-box; }
   

6. Css 斜塔式颜色，参照本站侧边栏日志归档效果，简约代码如下：

   .archives li:nth-child(4n+1),
   .archives li:nth-child(4n+4) {
   background: #f0f8ff;
   }.archives li:nth-child(4n+2),
   .archives li:nth-child(4n+3) {
   background: #fff;
   }
   

7. 五行代码实现元素四个角，效果见本站的文章页面下面的作者栏，当然这个是我之前用最笨的方法实现的，现在可以参照下面的代码实现起来：

   border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, red 100%);
   border-image-slice: 1;
   border-width: 1px;
   border-style: solid;
   border-image-outset: 10px;
   

8. css last-of-type
   last-of-type 是 CSS 选择器中的一个伪类，它表示选择某一类型的元素中的最后一个元素。具体来说，它会选择在同级元素中，与它们相同的元素类型中的最后一个元素。
   例如，以下代码将选择在每个 div 元素中最后一个 p 元素，并将其文本颜色设置为红色：

   div p:last-of-type {
   color: red;
   }
   

   如果有多个 div 元素，那么对于每个 div 元素，只会选择该 div 元素中的最后一个 p 元素，并将其文本颜色设置为红色。如果 div 元素中没有 p 元素，则不会选择任何元素。
   需要注意的是，last-of-type 选择器是基于元素类型而不是类名或 ID 进行匹配的。因此，如果页面中有多个具有相同类型的元素，那么 last-of-type 选择器将选择其中的最后一个元素。