css字體設置Font邊框Border的基礎用法是什么

這篇文章主要介紹“css字體設置Font邊框Border的基礎用法是什么”，在日常操作中，相信很多人在css字體設置Font邊框Border的基礎用法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css字體設置Font邊框Border的基礎用法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.字體設置Font
1).字體系列

<div style='font-family: sans-serif normal'></div> 可用字體： Serif Sans-serif Monospace Cursive Fantasy Times Courier

2).字體風格

<div style='font-style:normal'></div> 文本傾斜: normal   文本正常顯示 italic   文本斜體顯示 oblique  文本傾斜顯示

3).字體變形

<div style='font-variant:small-caps'></div> normal       顯示標準字體。 small-caps      顯示小型大寫字母的字體。

4).字體加粗

<div style='font-weight:normal'></div> normal    標準的字符 bold      粗體字符 bolder    更粗的字符 lighter   更細的字符 也可以使用數字表示，范圍為100~900

5).字體大小

<div style='font-size:60px'></div> smaller 變小 larger  變大 length  固定值 而且還支持百分比

2.邊框Border
首先說一下邊框風格，它的風格比較多，常用的一般是實線為主：

<div style='border-style:none'></div> hidden     隱藏邊框 dotted     點狀邊框 dashed     虛線邊框 solid      實線邊框 double     雙線邊框 groove     3D凹槽邊框 ridge      3D壟狀邊框 inset      3D inset邊框 outset     3D outset邊框 邊框也有四面，所以也會有上下左右 所以有時候為了更精確定位并修改樣式可以使用： border-top-style     上邊框樣式 border-right-style   右邊框樣式 border-bottom-style  下邊框樣式 border-left-style    左邊框樣式

先定義邊框的寬度 風格和顏色，然后定義邊框的其它屬性。

1).邊框形狀

<div style='border-radius:25px;'></div>

2).邊框陰影

<div style='box-shadow:1px 2px 2px 2px red'></div> 參數含義： 邊框各個方向的大小和顏色

3).邊框圖片

<div style='border-image:url(1.png) 30 30 10 round'></div> 參數含義： 邊框圖片的路徑 圖片邊框向內偏移 圖片邊框的寬度 邊框圖像區域超出邊框的量 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

到此，關于“css字體設置Font邊框Border的基礎用法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！