iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

我的網頁前端小小小教室系列 第 15

# Day15 CSS基礎設定_5

今天要來介紹網頁常用的元素border,邊框的意思。

border

我們今天要建立一個簡單的欄位版型搭配邊框。會有一張圖片、圖片介紹跟邊框。

<style>
        .wrap{
            width: 255px;
            height: 255px;
            margin: auto;
            margin-top: 30px;
        }
        
</style>
<body>
    <div class="test">
        <div class="wrap">
            <div class="item">
                <img src="https://picsum.photos/id/237/250/250" alt="">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, voluptatem reiciendis provident aliquid perferendis accusantium quis in explicabo placeat at dignissimos quasi ex neque voluptas ab nostrum molestiae commodi nemo!</p>
             </div>
        </div>
    </div>
</body>


目前出來的結果是這樣,而我們要幫他加上邊框,要注意的是,我有link一個reset.css的樣式,我們後續會介紹這個東西是做甚麼用的!還有要設定寬高時要注意還要加上border的寬度!

.item{
            border: solid black;
     }

border屬性介紹

邊框:單位大小 線的樣式(單線、虛線、雙線) 顏色
border: 5px solid black;

這樣有比較了解邊框可以設定甚麼嗎!


是不是有點擠,我們在段落p加上padding!這樣看起來就會舒服多了。

        p{
            padding: 5px;
        }

border圓角

border還有可以設定圓角的屬性!

邊框-圓角:單位大小;
border-radius: 12px;
.item{
            border: 4px solid black;
            border-radius: 12px;
            overflow: hidden;
        }
img{
        width: 100%;
    }

再加上這些屬性以後就會有圓角的邊框,看起來滑潤多了!圖片設定100%是為了要滿版!而設定overflow:hidden是為了不要圖片切出邊框。之後會說明這個屬性。

如果想要讓圖片有立體感呢?我們可以利用陰影box-shadow

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
加上這行後,試試看讓你的圖片有浮起來的效果!

box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;
讓我來為你解釋這些意思!

inset是指你要內框陰影還是外框陰影。


offset-x是指水平軸的陰影大小。單位(px、em)。

offset-y是指垂直軸的陰影大小。單位(px、em)。

blur-radius是模糊半徑。可填可不填、看需求、預設0。

spread-radius是擴散半徑。可填可不填、看需求、預設0。

陰影顏色可自行設定!必要項目。

快試試看你做出來是不是跟我一樣的效果呢!

那今天的教學就到這囉!


上一篇
Day14 CSS基礎設定_4
下一篇
Day16 CSS排版之神flex
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言