CSS3實現文字垂直排列 writing mode

2022-02-26 11:42:37 字數 2233 閱讀 7445

最近的乙個專案中要使文字垂直排列,也就是運用了css的writing-mode屬性。

writing-mode最初時ie中支援的乙個屬性,後來在css3中增添了這一新的屬性,所以在ie中和其他瀏覽器中的語法會有區別。

writing-mode:horizontal-tb;//預設:水平方向,從上到下 

writing-mode:vertical-rl; //垂直方向,從右向左

writing-mode:vertical-lr; //垂直方向,從左向右

發布已啟動: 專案: ql.back.api, 配置: release any cpu

二、實現按鈕點選文字下沉效果

我們可以設定文字的writing-mode,然後在結合text-indent來實現文字點選時的下沉效果;

>點選領紅包

span

>

<

p class

="vertical-text btn"

>開

更多:border-radius例項2

css blur() 將高斯模糊應用於輸出

css3 文字漸變整理(一)

CSS 3 實現水平垂直居中效果

在css中實現水平居中,會比較簡單。常見的,如果想實現inline元素或者inline block元素水平居中,可以在其父級塊級元素上設定 text align center實現 如果想實現塊級元素的水平居中對齊,可以設定magin auto。而如果想實現垂直居中對齊,或許就不太容易。以下,我總結了...

CSS 3 實現水平垂直居中效果

在css中實現水平居中,會比較簡單。常見的,如果想實現inline元素或者inline block元素水平居中,可以在其父級塊級元素上設定text align center實現 如果想實現塊級元素的水平居中對齊,可以設定magin auto。而如果想實現垂直居中對齊,或許就不太容易。以下,我總結了一...

css3 布局 文字

它主要應用在文字的多列布局方面,這種布局在報紙和雜誌上都使用了幾十年了,但要在web頁面上實現這樣的效果還是有相當大的難度,慶幸的是,css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...