- Published on
本文深度剖析了 Tailwind CSS 中用于创建元素轮廓的三种核心功能类：border, outline, 和 ring。内容系统性地阐述了它们各自基于 border, outline, 和 box-shadow 的底层 CSS 实现，并重点对比了它们在布局影响 (CLS)、样式能力（如圆角、偏移、内嵌）及适用场景上的关键差异。
Box-shadow
All Posts
- Frontend (50)
- JavaScript (29)
- Performance (25)
- React (21)
- CSS (17)
- Network (12)
- Security (12)
- Browser (11)
- StateManagement (7)
- ReactNative (7)
- TailwindCSS (6)
- Fiber (6)
- ReactInternals (6)
- MobileDevelopment (6)
- ReactHooks (5)
- Reconciliation (5)
- Accessibility (4)
- Layout (4)
- FrontendBuildTools (4)
- FrontendArchitecture (4)
- Vite (4)
- HTTP (3)
- Flexbox (3)
- PseudoClass (3)
- Forms (3)
- EventLoop (3)
- TCP (3)
- ConcurrentRendering (3)
- UtilityFirst (2)
- Asynchronous (2)
- Promise (2)
- ECMAScript (2)
- Object (2)
- useActionState (2)
- Animation (2)
- IP (2)
- TransportLayer (2)
- useEffect (2)
- ReactLazy (2)
- Suspense (2)
- JavaScriptModules (2)
- GarbageCollection (1)
- MemoryManagement (1)
- NodeJS (1)
- V8 (1)
- CSSSprites (1)
- FrontendOptimization (1)
- display (1)
- opacity (1)
- visibility (1)
- flex-basis (1)
- flex-grow (1)
- flex-shrink (1)
- focus (1)
- focus-visible (1)
- focus-within (1)
- CSSArchitecture (1)
- StackingContext (1)
- z-index (1)
- group (1)
- has (1)
- peer (1)
- DarkMode (1)
- border (1)
box-shadow (1)
- outline (1)
- ring (1)
- AbortController (1)
- fetch (1)
- WebAPI (1)
- Function (1)
- LexicalEnvironment (1)
- Debounce (1)
- EventHandling (1)
- Throttle (1)
- defineProperty (1)
- Metaprogramming (1)
- ObjectFreeze (1)
- PropertyDescriptor (1)
- Array (1)
- BigO (1)
- DataStructures (1)
- toStringTag (1)
- TypeChecking (1)
- Polyfill (1)
- Rendering (1)
- requestAnimationFrame (1)
- requestIdleCallback (1)
- Scheduler (1)
- HTML (1)
- QUIC (1)
- API (1)
- DELETE (1)
- GET (1)
- PATCH (1)
- POST (1)
- PUT (1)
- REST (1)
- Cryptography (1)
- HTTPS (1)
- SSL (1)
- TLS (1)
- ThreeWayHandshake (1)
- UDP (1)
- createPortal (1)
- DOM (1)
- Modal (1)
- ReactRouter (1)
- DataNormalization (1)
- Redux (1)
- Caching (1)
- DataFetching (1)
- ServerState (1)
- TanstackQuery (1)
- EventDriven (1)
- StateMachines (1)
- useReducer (1)
- Hydration (1)
- SSR (1)
- CodeSplitting (1)
- nuqs (1)
- URLState (1)
- FormData (1)
- ProgressiveEnhancement (1)
- ServerActions (1)
- Zod (1)
- Composition (1)
- Memoization (1)
- useEffectEvent (1)
- InitialMount (1)
- Keys (1)
- ListRendering (1)
- Context (1)
- use (1)
- useContext (1)
- Lanes (1)
- useDeferredValue (1)
- useTransition (1)
- useSyncExternalStore (1)
- useState (1)
- ExpoRouter (1)
- ReactNavigation (1)
- Routing (1)
- Components (1)
- Styling (1)
- AsyncStorage (1)
- DataPersistence (1)
- LayoutAnimation (1)
- ReactNativeReanimated (1)
- UI (1)
- FlatList (1)
- ScrollView (1)
- Virtualization (1)
- Expo (1)
- Haptics (1)
- PushNotifications (1)
- Keyboard (1)
- TextInput (1)
- CSSModules (1)
- PostCSS (1)
- Sass (1)
- Bundler (1)
- esbuild (1)
- Rollup (1)
- GlobImport (1)
- HMR (1)
- TreeShaking (1)
- ImageOptimization (1)
- StaticAssets (1)