css筆記

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

css3一個網站

Post by ejsoon » 2016 Aug 01, 17:33


ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

一個木板背景

Post by ejsoon » 2016 Aug 02, 15:12

Image
找循環圖片:Seamless mosaic background illustration

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

旋轉一週動畫

Post by ejsoon » 2016 Aug 09, 11:27

-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

表格邊框合併

Post by ejsoon » 2016 Aug 17, 13:24

table {
border-collapse: collapse;
}

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

css3 鼠標上去放大,離開變小

Post by ejsoon » 2016 Sep 19, 16:49

.photo{ -webkit-transition:all 1s; transition:all 1s;}
.photo:hover{ -webkit-transform:scale(1.2); transform:scale(1.2)}

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: css筆記

Post by ejsoon » 2017 Jun 19, 20:06

圓點外有圈

Code: Select all

<div class="cmt_tab">
	<img class="cmt_tab_radio" src="img/radio_checked.png" alt="radio_checked">
</div>
<style>
.cmt_tab {
    display: inline-block;
    border: 2px solid #eb503a;
    font-size: 0;
    padding: 4px;
    border-radius: 50%;
}
.cmt_tab_radio {
    width: 10px;
    visibility: hidden;
}
</style>

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: css筆記

Post by ejsoon » 2017 Jul 04, 17:21


ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

css text shadow 外红一周

Post by ejsoon » 2017 Aug 11, 11:39

h1 {
text-shadow: 3px 3px 0px #FF0000, -3px -3px 0px #FF0000, 3px -3px 0px #FF0000, -3px 3px 0px #FF0000, 3px 0px 0px #FF0000, -3px 0px 0px #FF0000, 0px -3px 0px #FF0000, 0px 3px 0px #FF0000;
color: white;
}

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

Re: css筆記

Post by ejsoon » 2017 Sep 12, 08:23

margin-top
margin-bottom
padding-top
padding-bottom
都與width關聯

只有
position: absolutely/fixed;
height
top和bottom才和parent-height關聯。

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

list-style-position

Post by ejsoon » 2017 Nov 08, 11:06

list-style-position 使表單數字或圓點標識包含在其中。

Post Reply