CSS3實戰 第一天

2021-07-06 08:30:39 字數 1520 閱讀 3258

學習使用純css3畫實心圓、上、下、左、右半圓。

/* 實心圓 */

.circle

/* 實心上半圓 */

.upcircle

/* 實心下半圓 */

.downcircle

/* 實心左半圓 */

.leftcircle

/* 實心右半圓 */

.rightcircle

對於上面的css**,我們首先需要明白,要繪製圓角,我們需要使用border-radius來實現。它有兩種設定值的方式:

畫實心圓:

我們直接設定寬與高相等,然後再需要設定四個角的值都為寬的一半

畫實心上半圓:

上半圓,其寬等於高的2倍,左上角和右上角需要設定為寬的一半。

畫實心下半圓

下半圓,其寬等於高的2倍,左下角和右下角需要設定為寬的一半,其它兩個角不需要處理。

畫實心左半圓

左半圓,其高度等於寬度的2倍,左上角和左下角需要設定為高度的一半,其它兩個角不需要處理。

畫實心右半圓

右半圓,其高度等於寬度的2倍,右上角和右下角需要設定為高度的一半,其它兩個角不需要處理。

class="circle">圓角div>

class="upcircle">實心上半圓div>

class="downcircle">實心下半圓div>

class="leftcircle">實心左半圓div>

class="rightcircle">實心右半圓div>

box-shadow是向盒子新增陰影,支援新增乙個或者多個,如果新增多個陰影,只需用逗號隔開即可。其語法為:

box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑]

[陰影擴充套件半徑]

[陰影顏色]

[投影方式];

其中,方括號內的是可省略的。

// 外陰影

.box-shadow-outset

// 內陰影

.box-shadow-inset

// 多個陰影

.box-shadow-multi

想看效果,新增如下**:

class="box-shadow-outset">

div>

class="box-shadow-inset">

div>

class="box-shadow-multi">

div>

css學習第一天

1 沒有樣式表時,如果我想更新整個站點中所有主體文字的字型,我必須一頁一頁地修改每張網頁。即便站點用資料庫提供服務,我仍然需要更新所有的模板,而且更新每一模板中每乙個例項例項的 樣式表的主旨就是將格式和結構分離。利於樣式表,我可以將站點上所有的網頁都指向單一的乙個 css檔案,我只要修改 css檔案...

CSS學習第一天

在css中,我們需要選擇器來進行選擇我們要進行操作的標籤,它的作用就是選擇標籤。1.基礎選擇器 形式標籤名 例如 div類選擇器 這是使用最多的選擇器 形式 類名 例如 eg注意不要忘記類名前面的乙個點。這裡有乙個口訣可以幫助我們記憶 樣式點 定義,結構 class 呼叫,乙個或多個,開發最常用。i...

CSS 學習第一天

css的三種引入方式 1.內嵌 直接在標籤中新增style屬性 格式 標籤名 style 樣式1 樣式值1 樣式2 樣式值2 2.內聯 在head標籤中新增 格式選擇器 樣式1 樣式值1 樣式2 樣式值2 1.id選擇器 在標籤中新增id屬性 標籤名 id id值 2.class選擇器 在標籤中新增...