摘要:本文主要講述利用屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。任意組合就能組成不同的由三角形組成的其它幾何形狀了。
本文主要講述利用border屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。
預備知識
border相關屬性
border-width 邊框的寬度
border-style 邊框的樣式
border-color 邊框的顏色
案例舉例
為了更加通俗易懂,demo用的是最簡單的dom元素和css屬性
商品介紹商品評價
.border{ margin: 50px auto; width: 540px; font-size:18px; line-height: 40px; text-align: center; } .border-left{ width: 260px; height: 40px; background: #f3941d; float: left; color: #fff; } .border-icon{ width: 0px; height: 0; border-width: 40 20 0 0; border-style: solid; border-color: #f3941d #f5d7b7 #f3941d #f3941d; float: left; } .border-right{ width: 260px; height: 40px; float: right; background: #f5d7b7; color: #aaa; }
上面的css代碼重點在于左邊較深顏色與右邊較淺顏色中間有一個三角形.border-icon
介紹
.content{ margin: 60px auto; width: 540px; height: auto; position: relative; border-top: 1px solid #ffffd; } .border{ position: absolute; margin-top: -15px; margin-left: 20px; } .text{ background: #e14340; height: 70px; width: 60px; line-height: 80px; color: #fff; text-align: center; } .small-triangle{ position: absolute; width: 0; height: 0; border-width: 15px 10px 0px 0px; border-style: solid; border-color: #fff #c33a37 #ccc #ffffd; margin-left: -10px; } .big-triangle{ width: 0; height: 0; border-width: 8px 30px; border-style: solid; border-color: #e14340 #e14340 #fff #e14340; }
上面的css代碼重點在于左邊較深顏色的小三角.small-triangle和底部的三角.big-triangle
原理解析
那么border屬性是如何變化出不同的幾何形狀呢?
.border1{ width:0; height:0; border-width:20px 20px 20px 20px; border-style:solid; border-color:#aaa #bbb #ccc #ffffd; }
看看上述樣式產生的是一個什么樣子的內容
我們通過border-width border-color可以任意變化每一條變的寬高,和顏色。
任意組合就能組成不同的由三角形組成的其它幾何形狀了。
更多內容可關注微信公眾號:有一個姑娘在coding
好好學習,快樂編碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115650.html
摘要:在動畫過程中,您能夠多次改變這套樣式。以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。為了獲得最佳的瀏覽器支持,您應該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括: 背景和邊框 文本效果 2D/3D 轉換 動畫 多列布局 用戶界面 CSS3 邊框: 用于創建圓角 border...
摘要:盒模型的組成大家肯定都懂,由里向外盒模型是有兩種標準的,一個是標準模型,一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有兩種標準的,一個是標準模型,一個是IE模型。 ?從上面兩圖不難看出在標準模型中,盒模型的寬高只是內容(content)的寬高, 而在IE模型中盒模型...
摘要:當它被選中時,一個設置在里的編碼的字符將會顯示出來。接著為我們的復選框添加一些動畫效果這里是所有的編碼,以及可以在這里進行體驗。這是一個新的叫做的表達式。設置介于和之間的最大最小值。至今并未得到全面的支持。 原文鏈接:22 Essential CSS Recipes更多譯文將陸續推出,歡迎點贊+收藏+關注我的專欄,未完待續…… 大家好,今天我們將會介紹一些非常實用的CSS小技巧,讓我...
閱讀 3520·2023-04-25 15:52
閱讀 590·2021-11-19 09:40
閱讀 2617·2021-09-26 09:47
閱讀 1035·2021-09-22 15:17
閱讀 3560·2021-08-13 13:25
閱讀 2241·2019-08-30 15:56
閱讀 3474·2019-08-30 13:56
閱讀 2112·2019-08-30 11:27