CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)

本文將為大家詳細(xì)介紹“CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識點(diǎn)，希望這篇“CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),長沙網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:長沙等地區(qū)。長沙做網(wǎng)站價(jià)格咨詢:13518219792

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

效果圖（如果想要三角形請點(diǎn)擊這里）：

CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)

代碼：

<html>
<head>
    <style type="text/css">
        .message_s {
            position: relative;
            cursor: pointer;
        }
 
            .message_s:after {
                position: absolute;
                content: "";
                /*以下內(nèi)容可以根據(jù)實(shí)際需要進(jìn)行調(diào)整 -----start------*/
                top: 0px;
                left: -13px; /*改成：right: -13px; 圓點(diǎn)顯示在右側(cè)*/
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #e98b7f;
                /*-----end------*/
            }
 
        div {
            height: 30px;
            border: 1px #000 solid;
            width: 300px;
            line-height: 30px;
            padding: 0px 0px 0px 15px;
        }
    </style>
    <script>
        function clickAction()
        {
            console.log("天不生我leader，鍵道萬古長如夜！");
        }
    </script>
</head>
<body>
    <div>
        <span class="message_s" onclick="clickAction()"></span>
        劍開天門
    </div>
</body>
</html>

附錄：下面看下左上角實(shí)現(xiàn)紅色三角號標(biāo)識

左上角實(shí)現(xiàn)紅色三角號標(biāo)識，如圖

CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)

利用偽類實(shí)現(xiàn)，position和transform、border屬性為重點(diǎn)。

位置調(diào)整修改top和left的值即可。

<html>
<head>
<title> New Document </title>
<style>
    div {
        background-color: #f4f4f4;
        padding: 20px;
    }
 
    .message_s {
        position: relative;
    }
 
        .message_s:after {
            position: absolute;
            top: -25px;
            display: block;
            width: 0;
            height: 0;
            border: 16px solid transparent;
            content: "";
            -webkit-transform: rotate(45deg);
        }
 
        .message_s:after {
            left: -25px;
            z-index: 0;
            border-right-color: red;
        }
</style>
</head>
<body>
<div>
    <span class="message_s">Internet Explorer 10、Firefox、Opera 支持 transform 屬性。Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。Opera 只支持 2D 轉(zhuǎn)換。</span>
</div>
</body>
</html>

如果你能讀到這里，小編希望你對“CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)
URL地址：http://www.rwnh.cn/article26/peogjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司、外貿(mào)建站、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

CSS3如何實(shí)現(xiàn)左上角或右上角顯示提醒圓點(diǎn)

css是什么意思