css 四周邊框角加粗效果

masturbator 發(fā)布于2019-04-23 11:44 / 1788人閱讀

摘要：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
    div {
        position: relative;
        left: 50px;
        top: 50px;
        margin: 10px;
        width: 500px;
        height: 100px;
        border: 1px solid #E3581D;
    }
    
    .border {
        position: absolute;
        padding: 5px;
        border-style: solid;
        border-color: #E3581D;
    }
    
    .row1 {
        border-width: 5px 0 0 5px;
        top: -5px;
        left: -5px;
        border-radius: 4px 0 0 0;
    }
    
    .row2 {
        border-width: 5px 5px 0 0;
        top: -5px;
        right: -5px;
    }
    
    .col1 {
        border-width: 0 0 5px 5px;
        bottom: -5px;
        left: -5px;
    }
    
    .col2 {
        border-width: 0 5px 5px 0;
        bottom: -5px;
        right: -5px;
    }
    style>
head>

<body>
    <div>
        <span class="border row1">span>
        <span class="border row2">span>
        <span class="border col1">span>
        <span class="border col2">span>
    div>
body>

html>

云服務(wù)器 GPU云服務(wù)器點(diǎn)擊邊框效果js css效果效果顯示 css jquery 氣球css js效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1093.html

相關(guān)文章

【叢林】CSS 邊框淺談

摘要：如果邊框樣式是，邊框?qū)挾葘?shí)際上會(huì)重置為。不允許指定負(fù)長(zhǎng)度值。值描述定義無(wú)邊框。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表，用于解決邊框沖突。如果沒(méi)有為邊框聲明顏色，它將與元素的文本顏色相同。這個(gè)值用于創(chuàng)建有寬度的不可見(jiàn)邊框。擴(kuò)展屬性邊框圖像定義和用法圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。基本屬性：寬度、樣式、顏色寬度 border-width border-width 簡(jiǎn)寫(xiě)屬性為元素的所有邊...

seanlook 2019-08-29 16:16 評(píng)論0 收藏0
從項(xiàng)目中學(xué)習(xí)HTML+CSS

摘要：最近由于工作原因以及自己的懈怠，已經(jīng)很久都沒(méi)有更新過(guò)博客了。所以這次就根據(jù)具體的一個(gè)網(wǎng)頁(yè)項(xiàng)目來(lái)梳理一下我這段時(shí)間學(xué)習(xí)這些東西的成果。最近由于工作原因以及自己的懈怠，已經(jīng)很久都沒(méi)有更新過(guò)博客了。通過(guò)這段時(shí)間，我發(fā)現(xiàn)堅(jiān)持一件事情是真的很難，都說(shuō)萬(wàn)事開(kāi)頭難，但是在放棄這件事上好像開(kāi)頭了后面就順理成章的繼續(xù)下去了。中間即使不怎么情愿也在努力的每周更新博客，但是自從9月份以來(lái)，第一次因?yàn)楣ぷ餍枰影喽?..

Lin_R 2019-04-23 13:12 評(píng)論0 收藏0
前端復(fù)習(xí)筆記

摘要：一基本結(jié)構(gòu)設(shè)置字符編碼集格式網(wǎng)頁(yè)頭部二文本標(biāo)記加粗傾斜下劃線刪除線上標(biāo)下標(biāo)三引用樣式表的方式內(nèi)聯(lián)樣式在元素的開(kāi)始標(biāo)簽里，設(shè)置一個(gè)屬性，并設(shè)置對(duì)應(yīng)的屬性名及屬性值例使用場(chǎng)景里，使用給元素添加樣式內(nèi)部樣式表在標(biāo)簽里加上一對(duì)標(biāo)簽，并且在標(biāo)簽設(shè)置對(duì)一、基本結(jié)構(gòu) //設(shè)置字符編碼集格式 // //網(wǎng)頁(yè)頭部二、文本標(biāo)記1.加粗 b2...

yhaolpz 2019-04-23 11:46 評(píng)論0 收藏0
DIV+CSS初學(xué)隨記

摘要：屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。在設(shè)置字體大小時(shí)，的值會(huì)相對(duì)于父元素的字體大小改變。因此的默認(rèn)尺寸是像素。關(guān)鍵字為字體指定了級(jí)加粗度。數(shù)字等價(jià)于，而等價(jià)于。與此相反，關(guān)鍵詞會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。字間隔word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。 word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提...

kgbook 2019-04-23 11:51 評(píng)論0 收藏0
Python開(kāi)發(fā)【前端篇】CSS

摘要：塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素元素就是標(biāo)簽，布局中常用的有三種標(biāo)簽，塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素，了解這三種元素的特性，才能熟練的進(jìn)行頁(yè)面布局。1.css基本語(yǔ)法及頁(yè)面引用 css基本語(yǔ)法 css的定義方法是：選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁(yè)面元素關(guān)聯(lián)起來(lái)的名稱，屬性是希望設(shè)置的樣式屬性每個(gè)屬性有一個(gè)或多個(gè)值。代碼示例： div{ wid...

番茄西紅柿 2019-04-23 13:27 評(píng)論0 收藏0