https://www.runoob.com/css/css-pseudo-classes.html
https://www.runoob.com/try/try.php?filename=trycss_image_gallery_responsive
https://www.runoob.com/css/css-image-sprites.html
https://blog.csdn.net/u010510187/article/details/82790963
https://www.runoob.com/css/css-attribute-selectors.html
https://www.runoob.com/cssref/css-selectors.html
position: sticky ;
box-sizing: border-box;//適應到border 裏，不會超出 自動取消邊框的寬度
resize: none; //用戶是否可以調整大小
transition: width 0.4s ease-in-out; //動畫
outline（輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline簡寫屬性在一個聲明中設置所有的輪廓屬性。
可以設置的屬性分別是（按順序）：outline-color, outline-style, outline-width
background-image: linear-gradient(#ededed, #9198e5);
background-image:linear-gradient(-280deg,green,yellow);
background-image:repeating-linear-gradient(-280deg,green,yellow);
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(circle , red, yellow, green);
@font-face
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
//css transition
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transition: width 10s, height 10s, transform 2s;
}
#div2:hover{
transform: rotateX(145deg);
}
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
//css transition
//css transition 2
#div3
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
top:150px;
transition: width 10s, height 10s, transform infinite;
transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3:hover{
/*transform: rotateX(145deg) ;*/
width:300px;
}
//css transition2
// animation 1
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 2s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
// animation 1
太陽系軌道
https://c.runoob.com/codedemo/5528
//CSS3 多列
<style>
.newspaper
{
column-count:4;
word-wrap:break-all;
column-gap: 40px;
column-rule-style: dashed;
column-rule-width: 1px;
column-rule-color: lightblue;
column-width: 200px;
}
</style>
</head>
<body>
<h2>英國維斯米斯特教堂碑文</h2>
<div style="display:none;">
“當我年輕的時候，我夢想改變這個世界；當我成熟以後，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以後，我發現我不能夠改變我們的國家，我的最後願望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在牀上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然後，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能爲國家做一些事情；然後，誰知道呢?我甚至可能改變這個世界。”
</div>
<div class="newspaper">
<div>當我年輕的時候，我夢想改變這個世界；當我成熟以後，我發現我不能夠改變這個世界</div>
<div>當我成熟以後</div>
<div>當我進入暮年以後</div>
<div>當我現在躺在牀上</div>
</div>
//CSS3 多列
//css3 resize
resize:both; /*用戶自己可以調整邊框的大小*/
//CSS3 縮略圖
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width:100px ;
height:60px;
}
//CSS3 縮略圖
//CSS3 橢圓
img {
border-radius: 55%;
}
//CSS3 橢圓
//CSS3 濾鏡
CSS filter 屬性用爲元素添加可視效果 (例如：模糊與飽和度) 。
blur, brightness contrast grayscale, huerotate, invert, opacity, saturate, sepia, shadow,
//CSS3 濾鏡
//CSS3 圖片的模態
https://www.runoob.com/try/try.php?filename=trycss_image_modal_js
//CSS3 圖片的模態
//CSS3 按鈕 禁用
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
//CSS3 按鈕 禁用
//CSS3 按鈕 clear 添加後可以清除後面的內容，使後續內容換行
clear:both;
//CSS3 按鈕 clear 添加後可以清除後面的內容，使後續內容換行
//CSS3 flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>https://www.runoob.com/css3/css3-flexbox.html</title>
<style>
body {
}
.flex-container {
direction: ltr;
flex-direction:row;/*flex-direction: row | row-reverse | column | column-reverse*/
justify-content: space-around;
/*justify-content: flex-start | flex-end | center | space-between | space-around 水平方向*/
align-items: stretch;
/*align-items: flex-start | flex-end | center | baseline | stretch 縱軸方向*/
flex-wrap: inherit;
/*flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; flex-wrap 屬性用於指定彈性盒子的子元素換行方式*/
align-content:stretch;
/*align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items,
但它不是設置彈性子元素的對齊，而是設置各個行的對齊.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
*/
display: flex;
width: 200px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
/*align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
*/
.alignself{
align-self: center;
}
/*flex 屬性用於指定彈性子元素如何分配空間。*/
.oneflex{
flex:1;
}
.twoflex{
flex:2;
}
.first {
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item twoflex">flex item 1</div>
<div class="flex-item first alignself oneflex">flex item 2</div>
<div class="flex-item oneflex">flex item 3</div>
</div>
</body>
</html>
//CSS3 flex
<!-- css make layout -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
img
{
position:absolute;
/* clip:rect(0px,60px,200px,0px);*/
clip:circle(1px,1px)
}
.headtitle{
background-color:black;
width:100%;
height:70px;
padding:2px;
}
.headtitle ul{
float:left;
margin:8px 10px 1px -20px;
}
.headtitle ul li{
display:inline-block;
list-style-type:none;
padding:17px;
background-color:yellow;
display:transparent;
margin-right:-1px;
}
.headtitle ul li a{
color:white;
}
.headtitle ul li a:hover{
color:red;
}
.headtitle ul li a.active{
color:#008CBA;
background-color: transparent;
}
</style>
</head>
<body>
<div class="headtitle">
<ul>
<li><a link="#">ADD</a></li>
<li><a link="#" class="active">BOND</a></li>
<li><a link="#">CIRCLE</a></li>
</ul>
</div>
</body>
</html>
<!-- media --->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
@media screen and (max-device-width:361px)
{
p.test {font-family:verdana,sans-serif;font-size:14px;color:green;}
}
@media screen and (min-device-width:361px) and (max-device-width:836px)
{
p.test {font-family:times,serif;font-size:10px;color:purple;}
}
@media screen and (min-device-width:837px) and (max-device-width:1536px)
{
p.test {font-family:times,serif;font-size:10px;color:red;}
}
</style>
<script>
function showscreen(){
alert(window.screen.width);
}
</script>
</head>
<body>
<p class="test">菜鳥教程 -- 學的不僅是技術，更是夢想！！！</p>
<button οnclick="showscreen()">press</button>
</body>
</html>