讀css揭祕(一)

時間 2021-05-25

標籤 css css3 svg wordpress post 字體優化動畫 url spa 欄目 CSS 简体版

原文原文鏈接

1.當css間存在某種關係時應當用關係去描述，而非相同的值css

1. currentcolor:取當前元素的color值，沒有則取父級的color值
2. inherit:繼承父級

2.實現透明邊框css3

核心問題在於：背景色撐滿了整個div也就是background-clip: border-box，若是單純的使用border: 1px solid rgba(225,225,225,.5)，會透過border看到背景因此使用background-clip: padding-box
<style>
div {
  height: 100px;
  width: 100px;
  border: 1px solid rgba(225,225,225,.5)
  background: red;
  background-clip: padding-box;
}
</style>
<div>

</div>

3.實現多邊框svg

注意點：box-shadow實現實線多邊框時比較好用，box-shadow會跟着元素圓角，但box-shadow並不會佔用文檔位置，當多個box-shadow屬性時，越新設置的層級越高，會覆蓋後面的設置的
<style>
body {
  position: relative;
  height: 100vh;
}
div {
  height: 100px;
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  box-shadow: 0 0 0 10px red, 0 0 0 20px green
}
</style>

<div>
</div>

注意點：outline實現兩層邊框和虛線邊框比較好用，outline一樣不佔用位置，而且不能貼合border-radius(被w3c認爲時bug??)
<style>
div {
  height: 100px;
  width: 100px;
  border: 5px solid green;
  outline: 5px solid blue;
}
</style>

<div>
</div>

4.背景圖片的定位方案wordpress

注意點：該方案對固定寬高的背景比較好用，但對於寬高彈性並非很好定位
<style>
div {
  background: url('./OIP.jpg') no-repeat #58a;
  background-position: 70% 70%(right  bottom) ;
}
</style>
<div>
</div>

<style>
div {
  background: url('./OIP.jpg') no-repeat #58a;
  background-position: calc(100% - 10px) calc(100% - 10px);
}
</style>
<div>
</div>

注意點：這種方式能夠指定到任意頂點的距離，更靈活，但須要注意降級
<style>
div {
  background: url('./OIP.jpg') no-repeat right bottom #58a;
  background-position: right 70px bottom 80px;
}
</style>
<div>
</div>

注意點：使用padding+background-origin: padding-box一樣能夠實現距離某個頂點的距離，默認值爲padding-box,對background-image生效；background-color的範圍是border-box;
<style>
div {
  padding: 10px
  background: url('./OIP.jpg') no-repeat right bottom #58a;
  background-origin: padding-box
}
</style>
<div>
</div>

5.邊框內圓角post

<style>
.outer {
  padding: 0.5em;
  background: red;
}
.inner {
  border-radius: 10px;
  background: green
}
</style>
<div class='outer'>
  <div class='inner'>
  </div>
</div>

注意點：outline不會跟隨border-radius，box-shadow會跟隨，用box-shadow填充outline和border-radius之間的空隙
<style>
div {
  height: 100px;
  width: 100px;
  background-color: red;
  outline: 10px solid green;
  box-shadow: 0 0 0 5px green;
  border-radius: 5px
}
</style>
<div>
</div>

6.條紋背景字體

注意點：若是某個色標的位置值比整個列表中在它以前的色標的位置值都要小，則該色標的位置值會被設置爲它前面全部色標位置值的最大值;整個種重複的條紋是基於background-repeat實現的，而repeating-linear-gradient是自身的鋪滿
<style>
div {
  background-image: linear-gradient(red 30%, green 0, green 50%, yellow 0);
  background-size: 100% 30%;
}
</style>
<div />

注意點：使用顏色疊加只須要改動一處顏色
<style>
div {
  background-color: red;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0 15px, transparent, 0 30px)
}
</style>
<div />

注意：linear-gradient的幾種寫法優化

background-image: linear-gradient(red 50%, green 0)
background-image: linear-gradient(red 0%, red 25%, green 25%, green50%);
background-image: linear-gradient(red 0 25%, green 25% 50%);

7.如何實現一個棋盤動畫

<style>
div {
  height: 300px;
  width: 300px;
  background-size: 30px 30px;
  background-color: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 25%), linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 25%)
  background-position: 0 0, 15px 45px, 45px 15px, 0 0;
}
</style>
<div />

代碼優化url

<style>
div {
  width: 300px;
  height: 300px;
  background: #eee;
  background-image:
                linear-gradient(45deg, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.1) 0 75%, rgba(0, 0, 0, 0.7) 0),
                linear-gradient(45deg, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.1) 0 75%, rgba(0, 0, 0, 0.7) 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
</style>
<div />

注意：使用圓錐漸變
<style>
div {
  height: 300px;
  width: 300px;
  background-image: repeating-conic-gradient(#eee 0 25%, red 25% 50%)
  background-size: 30px 30px;
}
</style>
<div />

注意點：svg作背景
<style>
div {
  height: 300px;
  width: 300px
  background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"><rect x="50" width="50" height="50"/> <rect y="50" width="50" height="50"/> </svg>');
}
</style>

8.生成一個帶圖片的邊框spa

注意點：兩個div疊加
<style>
.outer {
  padding: 10px;
  background-url: (xxx.jpg);
  background-size: cover;
}
.inner {
  background-color: #fff;
}
</style>
<div class='outer'>
  <div class='inner'>
  </div>
</div>

注意點：爲何不用background-color,而是用liear-gradient?由於background-clip始終會對background-color有效，沒法作到精細控制；background-image層級比background-color高；多個background-image先寫的層級高，此例要主語background-image層級，
<style>
div {
  hegiht: 300px;
  width: 300px;
  border: 5px solid transparent;
  background: linear-gradient(white, white), url('....jpg');
  background-clip: padding-box, border-box;
  background-origin: border-box
}
</style>
<div />

9.實現一個信封

<style>
div {
  height: 300px;
  width: 300px;
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0(background-position) / 5em 5em(background-size);
}
</style>
<div />

10.border-radius

https://zhuanlan.zhihu.com/p/42114065

11.平行四邊形

注意點：一正一反skewX
<style>
.outer {
  background: red;
  height: 100px;
  width: 100px;
  transform: skewX(45deg)
}
.inner {
  transform: skewX(-45deg)
}
</style>
<div class='outer'>
  <div class='inner'>
  </div>
</div>

<style>
div {
  position: relative;
}
div:after {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: red;
  z-index: -1;
  transform: skewX(45deg);
}
</style>
<div>
  一段位子
</div>

12.菱形圖片

注意使用scale填充空隙
<style>
div {
  transform: rotate(45deg)
}
img {
  transform: rotate(-45deg) scale(1.4)
}
</style>
<div>
  <img src='' />
</div>

注意點：clip-path能夠對元素進行剪切，而且能使用transition動畫
<style>
img {
  height: 200px;
  width: 200px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: clip-path 1s
}
img:hover {
  clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);
}
</style>
<img src='' />

13.切角效果

css回退機制
<style>
background: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);
</style>

注意使用no-repeat
<style>
div {
  height: 200px;
  width: 200px;
  background: linear-gradient(-135deg, transparent 15px, black 0) top left, linear-gradient(135deg, transparent 15px, black 0) top right, linear-gradient(45deg, transparent 15px, black 0,) bottom left, linear-gradient(-45deg, transparent 15px, black 0) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat
}
</style>
<div />

注意點： 這裏的border-image-slice: 1，指的是svg座標系統的
<style>
div {
  height: 100px;
  width: 100px;
  border: 15px solid transparent;
  border-image: 1 url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"> <polygon points="0,1 1,0 2,0 3,1 3,2 2, 3 1,3 0,2"/></svg>')
}
</style>
<div />

<style>
div {
  height: 100px;
  width: 100px;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  background-color: red
}
</style>
<div />

實現三角

<style>
div {
  height: 100px;
  width: 200px;
  background: linear-gradient(135deg, transparent 50%, black 0) top left, linear-gradient(-135deg, transparent 50%, black 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat
}
</style>
<div />

弧形切角

<style>
div {
  height: 200px;
  width: 200px;
  background: radial-gradient(circle at top left, transparent 15px, black 0) top left,
radial-gradient(circle at top right, transparent 15px, black 0) top right, radial-gradient(circle at bottom left, transparent 15px, black 0) bottom left, radial-gradient(circle at bottom right, transparent 15px, black 0) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat 
}
</style>
<div />

14.border-image
border-image

15.梯形

注意點：div+僞元素，用僞元素背景展現
<style>
div {
  padding: 0.5em;
  display: inline-block;
  position: relative;
}
div:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: red;
  transform: perspective(.5em) rotateX(5deg) scaleY(1.3);
  transform-origin: bottom
}
</style>

<div />

16.實現一個餅圖
step-end

注意點：單色不是能超過50%；
<style>
div {
  height: 100px;
  width: 100px;
  background-color: black;
  background-image: linear-gradient(to right, transparent 50%, green 0);
  //overflow: hidden
}
div::after {
  content: '';
  display: block;
  margin-left: 50%;
  background-color: inherit;
  transform-origin: left;
  border-radius: 0 100% 100% 0/50%;
  transform: rotate(10deg)
}
</style>
<div />

<style>
div {
  height: 100px;
  width: 100px;
  background: black;
  background-image: linear-gradient(to right, transparent 50%, green 0);
  border-radius: 50%;
}
div::after {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100px;
  background-color: inherit;
  transform-origin: left;
  border-radius: 0 100% 100% 0/50%;
  animation: rotate 50s liear infinite, bg 100s step-end infinite; 
  animation-play-state: paused;
  animation-delay: inherit; //經過父級設置
}
@keyframes rotate {
  to {
    transform: rotate(.5turn)
  }
}
@keyframes bg {
  50% {
    background-color: green
  }
}
</style>
<div style='animation-delay: 60s'/>

<style>
svg {
  background-color: green;
  border-radius: 50%
}
circle {
  fill: green;
  stroke: red;
  stroke-width: 50;//注意是width的中線是circle的邊；25*2;
  stroke-dasharray: 0 2*Math.PI*r//虛線的實線、空隙
  animation: rotate 100s linear infinite;
  animation-play-state: paused
}
@keyframs rotate {
  to {
    stroke-dasharray: 2*Math.PI*r 2*Math.PI*r
  }
}
</style>
<svg height='100' width='100'>
  <cricle r='25' cx='50' xy='50' style='animation-delay: -60s'/>
</svg>

注意點：cricle並無動證實cssanimation和svganimation運動效果會相互疊加
<style>
circle {
  fill: green;
  animation: move 2s linear infinite;
}
@keyframes move {
  to {
    transform: translateX(50px);
  }
}
</style>
<svg width='100' height='100'>
  <cricle r='1' cx='50' cy='50'>
   <animate attributeName="cx" from="50" to="0" dur="2s" repeatCount="indefinite" />
  </cricle>
</svg

<style>
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: conic-gradient(red 45%, transparent 0)
}
</style>
<div />

svg方案有點：易於怎加第三種顏色，可以打印

15.box-shadow

鄰邊投影
<style>
div {
  height: 100px;
  width: 100px;
  box-shadow: 3px 3px 6px -3px black
}
</style>

<div />

<style>
div {
  height: 100px;
  width: 100px;
  box-shadow: 3px 0 6px -3px black, -3px 0 6px -3px black;
}
</style>
<div />

16.不規則投影

注意點： 任何非透明的部分都會被一視同仁地打上投影，還能給陰影打上陰影
<style>
div {
  height: 100px;
  width: 100px;
  background: linear-gradient(135deg, transparent 15px, black 0) top right, linear-gradient(-135deg, transparent 15px black 0) top left, linear-gradient(45deg, transparent 15px block 0) bottom left, linear-gradient(45deg, transparent 15px, block 0) bottom right;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  filter: drop-shadow(0 0 5px black)
}
</style>
<div />

17.染色效果

注意點： filter也能過濾
<style>
img {
  transition: .5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover {
  filter: none
}
</style>
<div />

mix-blend-mode是是包裹元素容器的背景色和元素之間的混合
<style>
div {
  display: inline-block;
  background: hsl(335, 100%, 50%);
  transition: background .3s;
}
img {
  mix-blend-mode: luminosity
}
a:hover {
  background: transparent
}
</style>
<div>
  <img src='./1614955396-ad-3.jpg' />
</div>

注意點：該效果在img元素上無效 只能用於background
<style>
div {
  height: 600px;
  width: 600px;
  background-color: hsl(335, 100%, 50%);
  background-blend-mode: luminosity;
  background-image: url(./1614955396-ad-3.jpg);
  
}
</style>
<div />

18.毛玻璃

注意點：要給模糊的僞類添加背景，否則圖片會沒有模糊效果；注意使用負margin對僞元素進行修邊
<style>
body, div::after {
  background: url('1614955396-ad-3.jpg') 0 / cover fixed;
}
div {
  width: 100px;
  height: 100px;
  position: relative;
  background: hsla(0, 0%, 100%, .3);
  overflow: hidden;
}
div::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(20px);
  margin: -30px;
}
</style>
<div>
一段文字
</div>

19.折角

注意點：背景是能夠設置大小的
<style>
div {
  height: 100px;
  width: 100px;
  //linear-gradient(to top right, black 15px, transparent 0) 78px -78px, linear-gradient(to left bottom, transparent 15px, blue 0);很差的作法 忘記背景是能夠設置大小的^_^
  background: linear-gradient(to right top, black 15px, transparent 0) top right/17px 17px, linear-gradient(to bottom left, transparent 15px, blue 0);'
  background-repeat: no-repeat
}
</style>
<div />

其餘角度實現

注意點：僞元素的寬高，互換更真實
<style>
div {
  height: 100px;
  width: 100px;
  background: linear-gradient(-140deg, transparent 15px, blue 0);
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 23px;
  width: 19px;
  background-image: linear-gradient(to top right, red 50%, transparent 0);
  transform-origin: left bottom;
  transform: rotate(-11deg);
  box-shadow: 0 2px 4px -5px green; 
}
</style>
<div />

20.用樣式實現換行符

注意點：Unicode 字符表明換行符的：0x000A。在 CSS 中，這個字符能夠寫做 "\000A"，或簡化爲 "\A"
<style>
.n::after {
  content: "\A";
  white-space: pre;
}
</style>
<div>
  <span>
    name:
  </span>
  <span  class='n'>
    jack
  </span>
  <span>
    age:
  <span>
  <span class='n'>
    18
  </span>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
div~p:div後全部p被選中
div+p:div後緊跟p被選中
21.文本條紋

注意點：background-origin完美的解決了padding的問題；background-size受line-height限制
<style>
div {
  padding: .5em;
  line-height: 1.5;
  background-image: linear-gradient(to bottom, black 50%, red 0);
  background-size: auto 1.5*2em;
  background-origin: content-box;
}
</style>

<div>
  name<br />
  name<br />
</div>

22.縮進

坑點：tab-size用到普通元素上能夠實現縮進，可是和pre標籤進行代碼展現是要配合&#9;才能生效
<style>
#demo {
  -moz-tab-size: 8;
  tab-size: 8;
}
</style>
<pre id="demo">
for($i=0; $i<10; $i++) {
&#9;if($j > 10) {
&#9;&#9;echo 'Hello';
&#9;}
}
</pre>

https://usefulangle.com/post/151/css-tab-size
23.字體
字體相連
 字體碎片化
24.自定義下劃線

a[href] {
  text-decoration: none;
  border-bottom: 1px solid gray;
  line-height: .9; //文字換行時行高問題
}
a[href] {
  box-shadow: 0 -1px gray inset;
}
a[href] {//實線
  background: linear-gradient(gray, gray) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.15em;
  text-shadow: 0.05em 0 white, -0.05em 0 white 
}
a[href] {
  background: linear-gradient(90deg, white 50%, transparent 0) repeat-x;
  background-size: 10px 1px;
  background-position: 0 1.15em
}

1. css 揭祕-讀書筆記
2. 《CSS揭祕》讀書筆記
3. 《css 揭祕》讀書筆記
4. 《CSS揭祕》讀後感
5. 《css揭祕》讀書筆記
6. CSS 揭祕
7. 《CSS揭祕》筆記（一）
8. 《CSS揭祕》示例代碼全揭祕
9. CSS揭祕（引言）
10. css揭祕系列
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• JDK13 GA發佈：5大特性解讀
• RxJava操作符（一）Creating Observables

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。