wxss和css3的區別有哪些

這篇文章主要介紹了wxss和css3的區別有哪些，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

區別：1、 wxss不能直接通過css3中的background-image屬性來設置顯示的背景圖片；2、小程序中的文檔流中不存在window、document對象，在使用css3屬性position時需注意為基礎節點設置fixed屬性值。

wxss和css3的區別

0 . wxss不能直接通過css3中的background-image屬性來設置顯示的背景圖片。

例如我在wxss中書寫如下

background-image: url(imageB.png);

控制臺打印：

pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取，可以使用網絡圖片，或者 base64，或者使用<image/>標簽。

1 .小程序中的文檔流中不存在window、document對象，即不能使用jquery與zepto等js庫區操作dom。這也從另一方面致使css3屬性：position 在使用時需要一些注意事項。

使用時應注意，為基礎節點container設置fixed屬性，否則position=absolute不會生效
/**app.wxss**/

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  position: fixed;
}

2. 小程序中wxml中設置wxss變量時，應返回string類型值(注意  " "  和  ' '  之間的嵌套關系’’)。如下：

<view id='imageBtn' style='display:{{imageBtn_display?"inherit":"none"}}' catchtouchmove='touchRotateAction'></view>

3.其他

支持動畫 @keyframes，貌似不能加廠商前綴。

支持過渡 transition。

感謝你能夠認真閱讀完這篇文章，希望小編分享wxss和css3的區別有哪些內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!