巧用邊框設置一些效果

来源:https://www.cnblogs.com/qwguo/archive/2018/10/29/9870119.html
-Advertisement-
Play Games

我們在做css的時候為了提高網站的效率減少伺服器請求，我們可以通過css來實現一些簡單的圖片特效，比如說三角形，這篇文章講解的是通過邊框實現不同的效果。 首先看一下不同邊框樣式的效果： 代碼部分： 1 <style type="text/css"> 2 .style-border b { 3 bor ...


我們在做css的時候為了提高網站的效率減少伺服器請求，我們可以通過css來實現一些簡單的圖片特效，比如說三角形，這篇文章講解的是通過邊框實現不同的效果。

首先看一下不同邊框樣式的效果：

代碼部分：

 1 <style type="text/css">
 2 .style-border b {
 3     border-width:100px;
 4     border-color:orange blue yellow red;
 5     width:0px;
 6     height:0;
 7     vertical-align:middle;
 8     display:inline-block;
 9     margin:10px;
10 }
11 .style-border .style-10 {
12     width:110px;
13     height:100px;
14     border-width:50px 40px;
15     font-size:15px;
16     line-height:30px;
17 }
18 .style-border .solid {
19     border-style:solid;
20 }
21 .style-border .dotted {
22     border-style:dotted;
23 }
24 .style-border .dashed {
25     border-style:dashed;
26 }
27 .style-border .double {
28     border-style:double;
29 }
30 .style-border .groove {
31     border-style:groove;
32 }
33 .style-border .ridge {
34     border-style:ridge;
35 }
36 .style-border .inset {
37     border-style:inset;
38 }
39 .style-border .outset {
40     border-style:outset;
41 }
42 </style>
43 
44 <div class="style-border">
45     <b class="solid style-10">實線：solid</b>
46     <b class="solid"></b>
47     <b class="dotted style-10">點線：dotted</b>
48     <b class="dotted"></b>
49     <b class="dashed style-10">虛線：dashed</b>
50     <b class="dashed"></b>
51     <b class="double style-10">雙線：double</b>
52     <b class="double"></b>
53     <b class="groove style-10">3D凹槽：groove</b>
54     <b class="groove"></b>
55     <b class="ridge style-10">3D凸槽：ridge</b>
56     <b class="ridge"></b>
57     <b class="inset style-10">3D凹邊：inset</b>
58     <b class="inset"></b>
59     <b class="outset style-10">3D凸邊：outset</b>
60     <b class="outset"></b>
61 </div>
View Code

 

單個邊框可實現的效果：

代碼部分：

  1 <style type="text/css">
  2 .one-border b {
  3     border-width:100px;
  4     border-color:orange blue yellow red;
  5     width:0px;
  6     height:0;
  7     vertical-align:middle;
  8     display:inline-block;
  9     margin:10px;
 10 }
 11 .one-border .b-1 {
 12     border-width:20px 20px 0;
 13     border-color:orange transparent transparent;
 14     border-style:solid dashed dashed;
 15 }
 16 .one-border .b-2 {
 17     border-width:20px 20px 20px 0;
 18     border-color:transparent orange transparent transparent;
 19     border-style:dashed solid dashed dashed;
 20 }
 21 .one-border .b-3 {
 22     border-width:0 20px 20px 20px;
 23     border-color:transparent transparent orange;
 24     border-style:dashed dashed solid;
 25 }
 26 .one-border .b-4 {
 27     border-width:20px 0 20px 20px;
 28     border-color:transparent transparent transparent orange;
 29     border-style:dashed dashed dashed solid;
 30 }
 31 .one-border .b-5 {
 32     border-width:5px 30px 50px 30px;
 33     border-color:#efefef #ccc #ddd orange;
 34     border-style:solid;
 35 }
 36 .one-border .b-6 {
 37     border-width:44px 22px 15px;
 38     border-color:#ccc #eee #aaa orange;
 39     border-style:solid;
 40 }
 41 .one-border .b-7 {
 42     border-width:0 0px 55px 55px;
 43     border-color:#ccc #eee #aaa orange;
 44     border-style:solid;
 45 }
 46 .one-border .b-8 {
 47     border-width:55px 0px 0px 55px;
 48     border-color:#ccc #eee #aaa orange;
 49     border-style:solid;
 50 }
 51 .one-border .b-9 {
 52     border-width:20px 0 50px 23px;
 53     border-color:#ccc #eee #aaa orange;
 54     border-style:solid;
 55 }
 56 .one-border .b-10 {
 57     border-width:23px 5px 0 50px;
 58     border-color:orange #ccc #eee #aaa;
 59     border-style:solid;
 60 }
 61 .one-border .b-11 {
 62     border-width:15px 44px 0 22px;
 63     border-color:orange #ccc #eee #aaa;
 64     border-style:solid;
 65 }
 66 .one-border .b-12 {
 67     border-width:55px 55px 0 0px;
 68     border-color:orange #ccc #eee #aaa;
 69     border-style:solid;
 70 }
 71 .one-border .b-13 {
 72     border-width:55px 0px 0 55px;
 73     border-color:orange #ccc #eee #aaa;
 74     border-style:solid;
 75 }
 76 .one-border .b-14 {
 77     border-width:55px 55px 0 0px;
 78     border-color:#ccc orange #eee #aaa;
 79     border-style:solid;
 80 }
 81 .one-border .b-15 {
 82     height:45px;
 83     border-width:5px 3px;
 84     border-color:transparent orange transparent transparent;
 85     border-style:solid;
 86 }
 87 .one-border .b-16 {
 88     height:45px;
 89     border-width:5px 3px;
 90     border-color:transparent transparent transparent orange;
 91     border-style:solid;
 92 }
 93 </style>
 94 
 95 <div class="one-border">
 96     <b class="b-1"></b>
 97     <b class="b-2"></b>
 98     <b class="b-3"></b>
 99     <b class="b-4"></b>
100     <b class="b-5"></b>
101     <b class="b-6"></b>
102     <b class="b-7"></b>
103     <b class="b-8"></b>
104     <b class="b-9"></b>
105     <b class="b-10"></b>
106     <b class="b-11"></b>
107     <b class="b-12"></b>
108     <b class="b-13"></b>
109     <b class="b-14"></b>
110     <b class="b-15"></b>
111     <b class="b-16"></b>
112 </div>
View Code

兩個邊框可實現的效果：

代碼部分：

 1 <style type="text/css">
 2 .two-border b {
 3     border-width:100px;
 4     border-color:orange blue yellow red;
 5     width:0px;
 6     height:0;
 7     vertical-align:middle;
 8     display:inline-block;
 9     margin:10px;
10 }
11 .two-border .b-1 {
12     border-width:20px;
13     border-color:orange orange transparent transparent;
14     border-style:solid solid dashed dashed;
15 }
16 .two-border .b-2 {
17     border-width:20px;
18     border-color:transparent orange orange transparent;
19     border-style:dashed solid solid dashed;
20 }
21 .two-border .b-3 {
22     border-width:20px;
23     border-color:transparent transparent orange orange;
24     border-style:dashed dashed solid solid;
25 }
26 .two-border .b-4 {
27     border-width:20px;
28     border-color:orange transparent transparent orange;
29     border-style:solid dashed dashed solid;
30 }
31 .two-border .b-5 {
32     border-width:20px;
33     border-color:orange transparent orange transparent;
34     border-style:solid dashed solid dashed;
35 }
36 .two-border .b-6 {
37     border-width:20px;
38     border-color:transparent orange transparent orange;
39     border-style:dashed solid dashed solid;
40 }
41 .two-border .b-7 {
42     border-width:38px 45px 7px 21px;
43     border-color:orange orange transparent transparent;
44     border-style:dashed solid dashed solid;
45 }
46 .two-border .b-8 {
47     border-width:38px 45px 7px 21px;
48     border-color:orange transparent transparent orange;
49     border-style:dashed solid dashed solid;
50 }
51 .two-border .b-9 {
52     border-width:20px;
53     border-color:orange;
54     border-style:double outset;
55 }
56 .two-border .b-10 {
57     border-width:20px;
58     border-color:orange orange transparent transparent;
59     border-style:groove ridge inset dashed;
60 }
61 </style>
62 
63 <div class="two-border">
64     <b class="b-1"></b>
65     <b class="b-2"></b>
66     <b class="b-3"></b>
67     <
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端入門1-基礎概念
    聲明 本系列文章內容全部梳理自以下四個來源： 《HTML5權威指南》 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" 作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理 ...
  • js類的筆記
    Document //js的對象的寫法 //函數一句 ...
  • Vue Axios前後端數據交互（三）
    Axios 中文：https://www.kancloud.cn/yunye/axios/234845 github：https://github.com/axios/axios 1.安裝 npm install axios 2.引入載入 import Axios from "axios" Vue. ...
  • Vue基礎知識（一）
    項目初始化 1.安裝vue cli npm install g vue cli 2.初始化項目 vue init webpack my project 3.進入項目 cd my project 4.安裝依賴 npm install 5.啟動項目 npm run dev 項目目錄結構 index.ht ...
  • elementUI vue tree input 懶載入 輸入下拉樹型示例
    elementUI vue tree input 懶載入 輸入下拉樹型示例 ...
  • css background-image 自適應寬高——轉載
    就是這麼簡單的一句話，設置背景圖，並讓它100%的適應導航欄寬高，並設置不重覆，大小100%就OK了 轉載來源：https://blog.csdn.net/chenqk_123/article/details/44402355 ...
  • 精選：3個可以下載免費的高質量照片的網站
    在您的照片庫中加入成千上萬張高品質的照片，涵蓋各種主題和風格！下麵列出的網站提供可用於任何項目的圖像，沒有限制。您不必擔心因為一張小圖片的版權而導致麻煩。通過這些網站可以改善你的設計項目，這些是網上提供免費的高質量圖片最好的網站。作為設計師，都知道如何藉助免費素材來解放工作。他們經常會花好幾個小時去... ...
  • 【代碼筆記】Web-HTML-表單
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html 列表</title> </head> <body> <!--創建文本欄位text field--> <form action=""> first ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類